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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
js 幻灯片的实现
Dec 06 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python代码实现ID3决策树算法
2017/12/20 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
python中的列表和元组区别分析
2020/12/30 Python
10张动图学会python循环与递归问题
2021/02/06 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2015年管理人员工作总结
2015/05/13 职场文书