JS 实现可停顿的垂直滚动实例代码

前端之家收集整理的这篇文章主要介绍了JS 实现可停顿的垂直滚动实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="jb51code">
<pre class="brush:js;">
var ScrollMiddle = {
'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();
function scrolls(){

     var scrollValue = _this.Odiv.scrollTop;
     var sub_timer = null;
     var num=0;
     if(scrollValue>=_this.countHeight){
       _this.Odiv.scrollTop = 0;
     }else{
       _this.Odiv.scrollTop++;
       if(scrollValue%_this.height==0){
         clearInterval(_this.timer)
         function delay(){
           num++;
           if(num==3){
             num=0;
             clearInterval(sub_timer);
             sub_timer = null;
             clearInterval(_this.timer)
             _this.timer = setInterval(scrolls,_this.times);
             return false;
           }
         }
         sub_timer = setInterval(delay,_this.delay)
       }
     }
   }
   this.timer = setInterval(scrolls,_this.times);
 }

}

调用方法

ScrollMiddle.scroll();

HTML 结构:

......

CSS结构:

以上这篇JS 实现可停顿的垂直滚动实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章