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 結構:
<ul id="comment"> <li></li> ......</ul>
CSS結構:
#comment{  width:200px;  height:200px;  overflow:hidden;  }以上這篇JS 實現可停頓的垂直滾動實例代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答