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>
注意:内容的高度必须大于容器的高度,否则无法滚动