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 送给学长毕业祝福语简短