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


Posted in Javascript onNovember 23, 2016
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 相关文章推荐
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
You might like
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
vue实现登录拦截
2020/06/29 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python重试装饰器示例
2014/02/11 Python
Django中多种重定向方法使用详解
2019/07/17 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
园艺师求职信
2014/03/10 职场文书
成立公司计划书
2014/05/07 职场文书
党员公开承诺书内容
2014/05/20 职场文书
课外小组活动总结
2014/08/27 职场文书
邀请函怎么写
2015/01/30 职场文书
学校端午节活动总结
2015/02/11 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技