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多线程的实现方法
May 08 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
js实现左右轮播图
Jan 09 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
php 在文件指定行插入数据的代码
2010/05/08 PHP
php实现监听事件
2013/11/06 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
浅谈Node 调试工具入门教程
2018/03/20 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python中的pack和unpack的使用
2018/03/12 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
物理系毕业生自荐信
2013/11/01 职场文书
总经理工作职责范文
2014/03/14 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
MySQL数据库必备之条件查询语句
2021/10/15 MySQL