原生JS实现列表内容自动向上滚动效果


Posted in Javascript onMay 22, 2019

效果展示

(鼠标移入,滚动停止;鼠标移出,滚动继续)

原生JS实现列表内容自动向上滚动效果

实现原理

1. html结构:核心是ul > li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图:

   (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;)

原生JS实现列表内容自动向上滚动效果

2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden;

代码实现

HTML:

<div id="review_box">
  <ul id="comment1">
   <li>第一条</li>
   <li>第二条</li>
   <li>第三条</li>
   <li>第四条</li>
   <li>第五条</li>
   <li>第六条</li>
  </ul>
  <ul id="comment2"></ul>
 </div>

CSS:

* {
  margin: 0;
  padding: 0;
 }
 div {
  width: 100px;
  height: 63px; /* 必须 */
  overflow: hidden;/* 必须 */
  margin: 50px auto;
  border: 1px solid red;
  text-align: center;
 }
 ul {
  list-style: none;
 }

JavaScript:

window.onload = roll(50);
 function roll(t) {
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  ul2.innerHTML = ul1.innerHTML;
  ulbox.scrollTop = 0; // 开始无滚动时设为0
  var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  // 鼠标移入div时暂停滚动
  ulbox.onmouseover = function () {
   clearInterval(timer);
  }
  // 鼠标移出div后继续滚动
  ulbox.onmouseout = function () {
   timer = setInterval(rollStart, t);
  }
 }
 // 开始滚动函数
 function rollStart() {
  // 上面声明的DOM对象为局部对象需要再次声明
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  if (ulbox.scrollTop >= ul1.scrollHeight) {
   ulbox.scrollTop = 0;
  } else {
   ulbox.scrollTop++;
  }
 }

总结

以上所述是小编给大家介绍的原生JS实现列表内容自动向上滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
Bootstrap精简教程
Nov 27 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
python+opencv实现动态物体识别
2018/01/09 Python
python aiohttp的使用详解
2019/06/20 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python input函数使用实例解析
2019/11/22 Python
django序列化serializers过程解析
2019/12/14 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
创先争优活动方案
2014/02/12 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
党员一帮一活动总结
2014/07/08 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python