簡單連續滾動效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>簡單連續滾動效果(bwangel原創)</title>
</head>
<body>
<div style="overflow: hidden; height: 100px; width: 280px;" id="divMain" onmouseover="stopScroll()"
onmouseout="startScroll()">
<div id="div1">
<li>這是第一條訊息。</li>
<li>這是第二條訊息。</li>
<li>這是第三條訊息。</li>
<li>這是第四條訊息，HOHO。</li>
<li>這是第五條訊息，HAHA。</li>
<li>這是第六條訊息。</li>
<li>這是第七條訊息，HOHO。</li>
</div>
<div id="div2">
</div>
</div>
<script type="text/javascript">
var dh = 5; //滾動的步進距離。
var dt = 150; //滾動的時間間隔(ms)
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var divMain=document.getElementById("divMain");
function scroll()
{
if (div1.scrollHeight <= divMain.clientHeight )
{
div2.style.display = "none";
return;
}
divMain.scrollTop += dh;
if (divMain.clientHeight + divMain.scrollTop >= divMain.scrollHeight)
{
divMain.scrollTop = div1.scrollHeight - divMain.clientHeight;
}
}
div2.innerHTML = div1.innerHTML;
var i = 0;
function startScroll()
{
if (i == 0)
i = setInterval("scroll()", dt);
}
function stopScroll()
{
clearInterval(i);
i = 0;
}
startScroll();
</script>
</body>
</html>