JS 实现可停顿的垂直滚动实例代码
varScrollMiddle={
'Odiv':document.getElementById('comment'),//目标DOM
'Oli':document.getElementById('comment').getElementsByTagName('li'),
'times':30,//配置滚动时间
'delay':1000,//配置暂停的时间
inint:function(){
this.size=this.Oli.length;
this.height=59;
this.countHeight=this.size*this.height;
this.Odiv.innerHTML+=this.Odiv.innerHTML;
this.timer=null;
},
scroll:function(){
var_this=this;
_this.inint();
functionscrolls(){
varscrollValue=_this.Odiv.scrollTop;
varsub_timer=null;
varnum=0;
if(scrollValue>=_this.countHeight){
_this.Odiv.scrollTop=0;
}else{
_this.Odiv.scrollTop++;
if(scrollValue%_this.height==0){
clearInterval(_this.timer)
functiondelay(){
num++;
if(num==3){
num=0;
clearInterval(sub_timer);
sub_timer=null;
clearInterval(_this.timer)
_this.timer=setInterval(scrolls,_this.times);
returnfalse;
}
}
sub_timer=setInterval(delay,_this.delay)
}
}
}
this.timer=setInterval(scrolls,_this.times);
}
}
调用方法：
ScrollMiddle.scroll();
HTML结构：
<ulid="comment"> <li></li> ...... </ul>
CSS结构：
#comment{
width:200px;
height:200px;
overflow:hidden;
}
以上这篇JS实现可停顿的垂直滚动实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短