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 相关文章推荐
jQuery Tools tooltip使用说明
Jul 14 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
用JS实现选项卡
Mar 23 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
实现树状结构的两种方法
2006/10/09 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js post提交调用方法
2014/02/12 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python简单进程锁代码实例
2015/04/27 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
公司培训心得体会
2014/01/03 职场文书
监察建议书范文
2014/03/12 职场文书
群众路线调研报告范文
2014/11/03 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
同乡会致辞
2015/07/30 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android