//這是dom結構dom
<div id="demo"><div id="demo1">這裏是你要添加的數據(有浮動記得清楚浮動,否則沒高度)</div><div id="demo2"></div></div>seo
//代碼網上能夠搜到,原理是建立一個demo2 的div就,把demo1 的內容複製到demo2的裏面。定時器來增長demo的滾動高度。當滾動到最底下時讓demo的滾動高度從新賦值。判斷demo2距離父級頂部的高度與demo的滾動高度差值(不循環滾動從新計算);ip
<script>io
// 判斷當前數據是否超過顯示區域,超過則滾動,不然不滾動
var flag = true;
if(demo1.offsetHeight <= demo.offsetHeight) {
flag = false;
} else {
flag = true;
}
if(flag) {
var speed = 10 //滾動速度,越小越快
var cliH = demo1.offsetHeight
demo2.innerHTML = demo1.innerHTML
var num = demo2.offsetTop - cliH; // 這個本來是想實現上面的判斷,可是有bug。只有一條數據時會顯示兩條。做用是用來計算demo2的距離頂部的高度與demo的滾動高度的差,用於下面的判斷。
function Marquee() {
if(demo2.offsetTop - demo.scrollTop <= num)
demo.scrollTop -= demo1.offsetHeight
else {
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() {
clearInterval(MyMar)
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
}
}
</script>function