欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-03-21 10:30:42|栏目:JavaScript代码|点击:
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代码

栏    目:JavaScript代码

下一篇:微信小程序点击顶部导航栏切换样式代码实例

本文标题:JS 实现可停顿的垂直滚动实例代码

本文地址:http://www.codeinn.net/misctech/85239.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有