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实现可停顿的垂直滚动实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短