html js内容滚动播放,JS实现文字无缝滚动

html结构：

• aaaaaaaaaa
• bbbbbbbbbb
• ccccccccccc
• ddddddddddd
• eeeeeeeeeee
• fffffffffff

style样式：

#main{width: 300px;height: 126px;overflow: hidden;}

JS代码：

var main = document.getElementById("main");

var dom1 = document.getElementById("dom1");

//创建用于复制dom1的新节点

var newnode = document.createElement("div");

newnode.id = "dom2";

main.appendChild(newnode);

var dom2 = document.getElementById("dom2");

var speed = 50; //设置速度

dom2.innerHTML = dom1.innerHTML; //复制dom1节点

// 滚动函数

function moveTop() {

// 当main向上滚动超出部分>=滚动节点高度时, 设置为scrollTop为0

if (dom1.offsetHeight - main.scrollTop <= 0 ) {

main.scrollTop = 0;

// 或者main.scrollTop -= dom1.offsetHeight;

} else {

main.scrollTop++;

}

}

var myMarquee = setInterval(moveTop, speed); //设置定时器

// 鼠标悬停时清除定时器停止滚动，移出后继续滚动

main.onmouseover = function() {

clearInterval(myMarquee);

}

main.onmouseout = function() {

myMarquee = setInterval(moveTop, speed);

}