javascript实现文字无缝滚动效果

<dl> <dt> <ul> <li> <a href="#">BKCSHC161014002153</a> </li> <li> <a href="#">BKCSHC161014002153</a> </li> <li> <a href="#">BKCSHC161014002153</a> </li> ... </ul> </dt> <dd></dd> </dl>

js

<script> $(function(){ Marquee("marquee"); }) //订单滚动 var Marquee = function(id){ var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], liLength=original.getElementsByTagName("li").length, speed = 55; if(liLength<=8){ return } clone.innerHTML = original.innerHTML; var rolling = function(){ if (container.scrollTop === clone.offsetHeight) { container.scrollTop = 0; } else { container.scrollTop++; } } var timer = setInterval(rolling, speed)//设置定时器 container.onmouseover = function(){ clearInterval(timer) }//鼠标移到marquee上时,清除定时器,停止滚动 container.onmouseout = function(){ timer = setInterval(rolling, speed) }//鼠标移开时重设定时器 } </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygsyy.html