JS 实现可停顿的垂直滚动 

 1  var ScrollMiddle = {
 2          'Odiv':document.getElementById('comment'), // 目标DOM        
 3          'Oli': document.getElementById('comment').getElementsByTagName('li'), 
 4          'times':30,            // 配置滚动时间                                                
 5          'delay':1000,        // 配置暂停的时间                                
 6          inint:function(){
 7              this.size = this.Oli.length;
 8              this.height = 59;
 9              this.countHeight =this.size * this.height;
10              this.Odiv.innerHTML+=this.Odiv.innerHTML;
11              this.timer = null;
12          },
13          scroll:function(){
14              var _this = this;
15              _this.inint();
16              function scrolls(){
17 
18                  var scrollValue = _this.Odiv.scrollTop;
19                  var sub_timer = null;
20                  var num=0;
21                  if(scrollValue>=_this.countHeight){
22                      _this.Odiv.scrollTop = 0;
23                  }else{
24                      _this.Odiv.scrollTop++;
25                      if(scrollValue%_this.height==0){
26                          clearInterval(_this.timer)
27                          function delay(){
28                              num++;
29                              if(num==3){
30                                  num=0;
31                                  clearInterval(sub_timer);
32                                  sub_timer = null;
33                                  clearInterval(_this.timer)
34                                  _this.timer = setInterval(scrolls,_this.times);
35                                  return false;
36                              }
37                          }
38                          sub_timer = setInterval(delay,_this.delay)
39                      }
40                  }
41              }
42              this.timer = setInterval(scrolls,_this.times);
43          }
44      }

调用方法：

ScrollMiddle.scroll();

HTML 结构：

<ul id="comment">
    <li></li>
    ......
</ul>

CSS结构：

#comment{
   width:200px;
   height:200px;
   overflow:hidden;   
}

 

posted @ 2016-02-18 11:37  卷柏的花期  阅读(487)  评论(0)  编辑  收藏  举报