公告列表无缝向上滚动代码

最新推荐文章于 2022-07-04 15:01:07 发布

前端开发者

最新推荐文章于 2022-07-04 15:01:07 发布

阅读量358

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_36022231/article/details/103612777

前端专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="author" content="" />
  <title>公告列表无缝向上滚动代码</title>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    body {
      font-size: 12px
    }

    #demo {
      overflow: hidden;
      height: 80px;
      width: 280px;
      margin: 90px auto;
      position: relative;
    }

    #demo1 {
      height: auto;
      text-align: left;
    }

    #demo2 {
      height: auto;
      text-align: left;
    }

    #demo1 li {
      list-style-type: none;
      height: 22px;
      text-align: left;
      text-indent: 15px;
    }

    #demo2 li {
      list-style-type: none;
      height: 22px;
      text-align: left;
      text-indent: 15px;
    }
  </style>
</head>

<body>
  <div id="demo">
    <ul id="demo1">
      <li>6</li>
      <li>66</li>
      <li>666</li>
      <li>6666</li>
      <li>66666</li>
      <li>666666</li>
      <li>6666666</li>
      <li>66666666</li>
    </ul>
    <div id="demo2"></div>
  </div>
  <script type="text/javascript">
    // 执行的间隔
    var speed = 40
    // 向上滚动
    var demo = document.getElementById("demo");//外层容器
    var demo2 = document.getElementById("demo2");//内容容器
    var demo1 = document.getElementById("demo1");//空容器
    var leg = demo1.getElementsByTagName('li').length//内容条数
    if (leg > 4) {//大于几条开始滚动
      demo2.innerHTML = demo1.innerHTML//空容器中复制一份内容容器
      function Marquee() {
        if (demo.scrollTop >= demo1.offsetHeight) {//demo中被卷去的高度 >= demo1区域高
          demo.scrollTop = 0;//demo中被卷去的高度设为0
        }
        else {
          demo.scrollTop = demo.scrollTop + 1;//demo中被卷去的高度每次+1
        }
      }
      var MyMar = setInterval(Marquee, speed)//开启定时器
      demo.onmouseover = function () { clearInterval(MyMar) }//悬停时关闭定时器
      demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }//悬停取消后开启定时器
    }
  </script>
</body>

</html>