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实现可停顿的垂直滚动实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。