文字数项无缝滚动

因项目需求要一个简单的中奖名单的循环播放,在网上找了好多,写的都过于繁琐。

首先项目是移动端项目,无需做鼠标划过暂停,因时间紧张,本次也不再添加,有空闲时间再来补充。

1、布局部分

<div id="demo" class="qimo8">
          <div class="qimo">
              <div id="demo1">
                  <ul>
                      <li>某某某获得一等奖</li>
                      <li>某某某获得四等奖</li>
                      <li>某某某获得三等奖</li>
                      <li>某某某获得二等奖</li>
                      <li>某某某获得四等奖</li>
                      <li>某某某获得三等奖</li>
                      <li>某某某获得二等奖</li>
                      <li>某某某获得三等奖</li>
                  <li>某某某获得一等奖</li>
                      <li>某某某获得四等奖</li>
                      <li>某某某获得三等奖</li>
                      <li>某某某获得二等奖</li>
                      <li>某某某获得四等奖</li>
                      <li>某某某获得三等奖</li>
                      <li>某某某获得二等奖</li>
                      <li>某某某获得三等奖</li>
                  </ul>
              </div>
              <div id="demo2"></div>
          </div>
      </div>

2、样式代码

<style media="screen">
    .qimo8{ overflow:hidden; height: 200px;}
    .qimo8 .qimo {/*width:99999999px;*/height:8000%;}
    .qimo8 .qimo ul{overflow:hidden; zoom:1; }
    .qimo8 .qimo ul li{list-style:none; font-size: 24px;margin: 0 1rem;}
    </style>

3、js部分

var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML=document.getElementById("demo1").innerHTML;
    function Marquee(){
        if(demo.scrollTop-demo2.offsetHeight>=0){
            demo.scrollTop-=demo1.offsetHeight;
        }
        else{
            demo.scrollTop++;
        }
    }
    setInterval(Marquee,40);

完成啦!

想改为横屏滚动的,看懂代码自己就能动手改啦,空闲时再来补充!

posted @ 2019-06-20 15:34  庙小妖  阅读(218)  评论(0编辑  收藏  举报