实现简单的信息无缝滚动(移动端)

2019-02-20 00:44:41来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

html代码:

<div style="position:relative; height:5rem">
      <div id="demo" style="position:absolute;width:100%;height: 4rem; overflow:hidden; text-align:center;margin: .5rem 0;">
         <div id="demo1">
               <p><span>广东省广州市 网友:186****0751</span>通过提交需求得到了律师帮助</p>
               <p><span>江苏省南京市 网友:138****7913</span>通过提交需求得到了律师帮助</p>
               <p><span>广西省南宁市 网友:136****8755</span>通过提交需求得到了律师帮助</p>
               <p><span>浙江省杭州市 网友:188****3421</span>通过提交需求得到了律师帮助</p>
               <p><span>广东省惠州市 网友:134****2244</span>通过提交需求得到了律师帮助</p>
               <p><span>广东省东莞市 网友:132****9649</span>通过提交需求得到了律师帮助</p>
               <p><span>湖南省长沙市 网友:138****1354</span>通过提交需求得到了律师帮助</p>
               <p><span>湖北省武汉市 网友:189****8828</span>通过提交需求得到了律师帮助</p>
         </div>
         <div id="demo2"></div>
      </div>
</div>

 

css代码:
#demo div{
   color: #3a3a3a;
   font-size: .34rem;
   line-height: .8rem;
}

#demo div span{
   color: #f65c53;
}

js代码:

<script>
      var speed = 40
      var demo = document.getElementById("demo");
      var demo2 = document.getElementById("demo2");
      var demo1 = document.getElementById("demo1");
      demo2.innerHTML = demo1.innerHTML;
      function Marquee() {
         if (demo2.offsetTop - demo.scrollTop <= 0) {
            demo.scrollTop -= demo1.offsetHeight;
         } else {
            demo.scrollTop++;
         }
      }
      var MyMar = setInterval(Marquee, speed);
      demo.onmouseover = function () { clearInterval(MyMar) }
      demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
注意:内容的高度必须大于容器的高度,否则无法滚动

原文链接:https://www.cnblogs.com/ycgo/p/10393711.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:react项目和next项目修改默认端口号

下一篇:实例演示编程语言