<!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" οnmοuseοver="stopScroll()"
οnmοuseοut="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>
8710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
