欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)排行榜文字向上滾動輪播效果

 更新時間：2019年11月26日 14:26:31   作者：liu1007735214  
這篇文章主要為大家詳細介紹了JS實現(xiàn)排行榜文字向上滾動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在一個抽獎活動中需要在頁面上對中獎名單做排行榜的輪播，故根據(jù)下面的簡單列子修改實現(xiàn)了滾動效果。

效果圖(文字向上輪播)：

demo如下：

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
    <meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2" />    
    <meta name="Description" content="描述信息" />
    <title>循環(huán)滾動</title>
    <!--CSS/JS-->
    <style type="text/css">
      *{margin:0;padding:0;}
      ul,li{list-style:none;display:block;}
      #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
      #scrollBox #con1,#con2{width:280px;float:left;}
      #scrollBox li{height:15px;line-height:15px;text-align:center;}

    </style>

  </head>
 <body>
    <!--div-->
  <div id="scrollBox">
    <ul id="con1">
      <li>李華 中了10塊錢<li>
      <li>Leo 中了一個手機<li>
      <li>劉明 中了一塊毛巾<li>
      <li>ll 中了保溫杯<li>
      <li>nice 中了100塊錢紅包<li>
      <li>108 中了20元優(yōu)惠券<li>
      <li>ok 中了100塊錢<li>
      </ul>
    <ul id="con2"></ul>
  </div>
  <script type="text/javascript">      
        var area =document.getElementById('scrollBox');
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML=con1.innerHTML;
        function scrollUp(){
        if(area.scrollTop>=con1.offsetHeight){
          area.scrollTop=0;
        }else{
          area.scrollTop++
        }
        }        
        var time = 50;
        var mytimer=setInterval(scrollUp,time);
        area.οnmοuseοver=function(){
          clearInterval(mytimer);
        }
        area.οnmοuseοut=function(){
          mytimer=setInterval(scrollUp,time);
        }
    </script>
 </body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論