html字幕来回滚动,JS实现的文字间歇循环滚动效果完整示例

本文实例讲述了JS实现的文字间歇循环滚动效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

www.jb51.net - 间歇循环滚动

#box{

height:240px;

width:300px;

margin:0 auto;

border:1px solid #0066FF;

overflow:hidden;

padding-bottom:20px;

}

#box li{

color:#333;

height:24px;

}

#box ul{

margin:0;

padding:0;

}

• 脚本之家1
• 脚本之家2
• 脚本之家3
• 脚本之家4
• 脚本之家5
• 脚本之家6
• 脚本之家7
• 脚本之家8
• 脚本之家9

var area=document.getElementById("box");

area.innerHTML+=area.innerHTML;

var liHeight=24;

area.scrollTop=0;

var delay=2000;

var speed=50;

var time;

function starMove(){

area.scrollTop++;

time=setInterval("scrollUp()",speed);

}

function scrollUp(){

if(area.scrollTop%liHeight==0){

clearInterval(time);

setTimeout("starMove()",delay);

}else{

area.scrollTop++;

if(area.scrollTop>=area.offsetHeight/2){

area.scrollTop=0;

}

}

}

setTimeout("starMove()",delay);

希望本文所述对大家JavaScript程序设计有所帮助。