原生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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
Yii全局函数用法示例
2017/01/22 PHP
php实现用户登陆简单实例
2017/04/04 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
python列表的常用操作方法小结
2016/05/21 Python
python 调用HBase的简单实例
2016/12/18 Python
Mac 上切换Python多版本
2017/06/17 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
详解python中asyncio模块
2018/03/03 Python
对python中Json与object转化的方法详解
2018/12/31 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
财务担保书范文
2014/04/02 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
邀请函的格式
2015/01/30 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android