JavaScript 实现无缝循环滚动效果
想把 table 中的内容做成滚动效果,尝试了很多代码,有的都只循环了一次就停了。这个代码会一直循环,而且无缝,解释也非常详细。希望对大家有帮助!
[removed]
[removed] = function() {
var speed = 50;
var scrollContainer = document.getElementById('scrollContainer');
var scrollContent = document.getElementById('scrollContent');
var clonedContent = scrollContent.cloneNode(true);
scrollContainer.appendChild(clonedContent);
function scroll() {
if (scrollContainer.scrollTop >= scrollContent.scrollHeight) {
scrollContainer.scrollTop = 0;
} else {
scrollContainer.scrollTop++;
}
}
var scrolling = setInterval(scroll, speed);
}
[removed]
<style>
#scrollContainer {
height: 200px;
overflow: hidden;
position: relative;
}
#scrollContent {
height: auto;
width: 100%;
position: absolute;
}
</style>
<!-- table content here -->
14.5KB
文件大小:
评论区