您的位置:首页 > 其它

CSDN-实现新闻的自动滚动

2008-03-05 10:49 239 查看
代码来自CSDN,仅供学习

效果:

1.


2.


代码:

1.html

<html>
<head>
</head>
<body>
<form>
<iframe style="margin: 0; padding: 0; width: 360px; height: 16px; " src="2.htm" frameborder="0" scrolling="no"></iframe>
</form>
</body>
</html>

2.htm

<html>
<head>
</head>
<body>
<DIV>
<UL id=scrollCon>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</UL></DIV>
<SCRIPT language=javascript>
var con=document.getElementById("scrollCon");
var items=con.getElementsByTagName("li");
var lineNum=items.length;
var str=con.innerHTML;
con.innerHTML=str+str;
var timer1;
var timer2;
var line_height=items[0].offsetHeight;
var step=0;
var cstep=0;
var bplay=false;
function startScroll(){
timer1=setInterval("doScroll()",10);
}

function doScroll(){
window.scrollBy(0,1);
step++;
if(step>=line_height) {
clearInterval(timer1);
step=0
cstep++;
if(cstep>=lineNum){
cstep=0;
window.scrollTo(0,0);
}
}
}
function Stop(){
bplay=false;
clearInterval(timer2);
}
function Start(){
if(bplay)return;
bplay=true;
timer2=setInterval("startScroll()",6000);
}
Start();
</SCRIPT>
</BODY>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: