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 相关文章推荐
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
vue渲染方式render和template的区别
Jun 05 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读取文件内容后清空文件示例代码
2014/03/18 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
keras slice layer 层实现方式
2020/06/11 Python
python输入中文的实例方法
2020/09/14 Python
Python如何telnet到网络设备
2021/02/18 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
2014年个人技术工作总结
2014/12/08 职场文书
2014企业年终工作总结
2014/12/23 职场文书
车辆挂靠协议书
2016/03/23 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
sql server 累计求和实现代码
2022/02/28 SQL Server