<html>
<head>
<title>marquees</title>
<script language="javascript"> function $(id){
return document.getElementById(id);
}
var marquees, previousScrollTop, stopScroll, marqueesOffsetHeight, marqueesScrollHeight;
function init(){
marquees = $("marquees");
previousScrollTop=null; //这个变量用于判断滚动条是否已经到了尽头
stopScroll=false; //这个变量控制是否停止滚动
marqueesOffsetHeight=200; //内容区高度
marqueesScrollHeight = marquees.scrollHeight;//offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度
with(marquees){
noWrap=true; //这句表内容区不自动换行
//style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesOffsetHeight;
style.overflowY="auto";// hidden : 滚动条不可见
onmouseover=new Function("stopScroll=true");// 鼠标经过,停止滚动
onmouseout=new Function("stopScroll=false"); //鼠标离开,开始滚动
}
marquees.innerHTML+=marquees.innerHTML;
setInterval("scrollUp()",20);
}// document.body.onload=init; function scrollUp(){
if(stopScroll==true){
return;
}
previousScrollTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1;//滚动
if(previousScrollTop==marquees.scrollTop){
marquees.scrollTop=marqueesScrollHeight - marqueesOffsetHeight + 1;
//滚动条向下移动一个像素,如果滚动条不动了,则向上滚动到和当前画面一样的位置,当然不仅如此,同样还要向下滚动一个像素(+1):
}
}
</script>
</head>
<body onload="init()">
<div id="marquees">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货