本文介绍了如何使用JavaScript实现文字无缝滚动效果。通过获取HTML元素，利用定时器控制DOM节点的内联样式，实现列表内容的持续滚动。代码包含鼠标悬停暂停和移开继续的功能，适用于订单列表等场景。
JavaScript实现文字无缝滚动效果
本文分享了一个JavaScript实现的文字无缝滚动示例，供读者参考。
HTML结构如下：
<dl id="marquee" class="marquee">
<dt>
<ul class="right-content">
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a>
</li>
...
</ul>
</dt>
<dd></dd>
</dl>
JavaScript逻辑如下：
<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>
以上是本文的全部内容，希望能为读者的学习提供帮助，欢迎继续支持本站。