html結(jié)構(gòu)：
<div id="main">
<div id="dom1">
<ul>
<li>aaaaaaaaaa</li>
<li>bbbbbbbbbb</li>
<li>ccccccccccc</li>
<li>ddddddddddd</li>
<li>eeeeeeeeeee</li>
<li>fffffffffff</li>
</ul>
</div>
</div>
style樣式：
<style>
#main{width: 300px;height: 126px;overflow: hidden;}
</style>
JS代碼：
<script>
var main = document.getElementById("main");
var dom1 = document.getElementById("dom1");
//創(chuàng)建用于復(fù)制dom1的新節(jié)點(diǎn)
var newnode = document.createElement("div");
newnode.id = "dom2";
main.appendChild(newnode);
var dom2 = document.getElementById("dom2");
var speed = 50; //設(shè)置速度
dom2.innerHTML = dom1.innerHTML; //復(fù)制dom1節(jié)點(diǎn)
// 滾動函數(shù)
function moveTop() {
// 當(dāng)main向上滾動超出部分>=滾動節(jié)點(diǎn)高度時, 設(shè)置為scrollTop為0
if (dom1.offsetHeight - main.scrollTop <= 0 ) {
main.scrollTop = 0;
// 或者main.scrollTop -= dom1.offsetHeight;
} else {
main.scrollTop++;
}
}
var myMarquee = setInterval(moveTop, speed); //設(shè)置定時器
// 鼠標(biāo)懸停時清除定時器停止?jié)L動忽肛，移出后繼續(xù)滾動
main.onmouseover = function() {
clearInterval(myMarquee);
}
main.onmouseout = function() {
myMarquee = setInterval(moveTop, speed);
}
</script>
