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事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
vue使用echarts画组织结构图
Feb 06 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jQuery代码优化 事件委托篇
2011/11/01 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
使用python为mysql实现restful接口
2018/01/05 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python容器类型公共方法总结
2020/08/19 Python
python tqdm库的使用
2020/11/30 Python
python实现按日期归档文件
2021/01/30 Python
阿里旅行:飞猪
2017/01/05 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
生日宴会策划方案
2014/06/03 职场文书
学校志愿者活动总结
2014/06/27 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
教师学期末个人总结
2015/02/13 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang