原生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 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
Validform表单验证总结篇
Oct 31 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
小程序如何使用分包加载的实现方法
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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
图解js图片轮播效果
2015/12/20 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
MVVM 双向绑定的实现代码
2018/06/21 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python中dict()的高级用法实现
2019/11/13 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
实习教师自我鉴定
2013/09/27 职场文书
广告学专业应届生求职信
2013/10/01 职场文书
物理教育专业毕业生推荐信
2013/11/03 职场文书
销售行政专员职责
2014/01/03 职场文书
教导处工作制度
2014/01/18 职场文书
工作目标责任书
2014/07/23 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
班级班风口号大全
2015/12/25 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL