zoukankan      html  css  js  c++  java
  • 文字数项无缝滚动

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

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

    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 {/*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);

    完成啦!

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

  • 相关阅读:
    《C#微信开发系列(2)-自定义菜单管理》
    《C#微信开发系列(1)-启用开发者模式》
    python多进程: multiprocessing Pool 和tqdm
    前端
    python 缓存
    python pymysql
    python paramiko模块
    Linux之TCPIP内核参数优化
    python进程、线程、协程、IO多路复用
    python socket
  • 原文地址:https://www.cnblogs.com/lxn2/p/11059048.html
Copyright © 2011-2022 走看看