js实现列表循环滚动如何实现?下面是具体的代码内容:
知识点:
clientHeight元素的高度
clientTop元素顶部边框的宽度
scrollTop滚动条遮挡的部分的高度(包含border)
scrollHeight整个内容的高度(包含border)
offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表循环滚动</title> </head> <style> html, body { height: 100%; width: 100%; overflow: hidden; background-color: #999; } .parent { width: 728px; margin: 200px auto; height: 200px; overflow: hidden; background-color: #fff; } </style> <body> <div id="parent"> <table border="1" cellpadding="18" cellspacing="0" id="child"> </table> <div id="cloneChild"></div> </div> <script type="text/javascript"> let parent = document.getElementById('parent'); let child = document.getElementById('child'); let str = ''; for (let i = 0; i < 10; i++) { str += `<tr>`; for (let j = 0; j < 6; j++) { str += `<td>第${i}行第${j}列</td>`; } str += `</tr>` } child.innerHTML = str; let cloneChild = document.getElementById('cloneChild'); // 深度克隆一份表格 相比 innerHTML 的优势在于可以克隆元素的全部的属性 let cloneNoe = child.cloneNode(true); // 追加到 parent 里面 做无缝切换视觉效果 parent.appendChild(cloneNoe); (function () { setInterval(function () { // parent.scrollTop + parent.clientHeight = child.scrollHeight; // child.scrollHeight - parent.scrollTop = parent.clientHeight; // 让他多滚动 parent 一显示区域的高度。再跳到 最顶部 ,正好 给人一种在不断滚动的错觉 if (parent.scrollTop >= child.scrollHeight) { parent.scrollTop = 0; } else { parent.scrollTop++; } }, 20); })() </script> </body> </html>
上述就是全部内容,请大家多多关注后续更多精彩内容。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/127740.html
列表自动滚动循环播放不要太爽,下面看看具体代码: 1.实现效果图 鼠标移入,暂停滚动; 鼠标移出,继续滚动; 2.原理 第一:要实现无缝衔接,在原有ul后面还要有一个一样内容的ul; 第二:在最外层div为可视区域,设overflow:hidden; 第三:2个ul的高度 > 外层可视div高度,才能滚动; 3.实现代码 html: <!--vue--> ...
摘要:效果呈现整个列表间隔设定的时间向上移动一个的高度结构设置时,注意高度是显示多少个如的高度是,显示个,高度则是实现思路获得下第一个元素的高度,对它的或进行一个从有到无的动画变化,代码如下或者改成动画结束后,把它插到最后,形成无缝 效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: title1 title2 ...
摘要:闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数,循环一个整数数组,延迟秒打印这个数组中每个元素的索引。 文章来源:http://mp.weixin.qq.com/s/vs0... 前言 在公众号上看到了这篇文章,觉得很有用,有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里,我会详细介绍这三...
vue如何为大家展示列表无缝循环滚动,以下就是具体代码内容如下: 功能介绍: 在PC端、大数据、官网、后台管理平台开发项目中,时常会要求展示这种列表循环滚动。 大致需求: 1、列表内容可以循环展示; 2、每条内容展示时间间距几秒; 3、可以形成走马灯样式效果; 整体思路: 1、使用两个定时器嵌套实现; 2、需要两个相同容器存放同样内容,实现无缝衔接效果; 效果展示: &l...
阅读 498·2023-03-27 18:33
阅读 706·2023-03-26 17:27
阅读 606·2023-03-26 17:14
阅读 575·2023-03-17 21:13
阅读 498·2023-03-17 08:28
阅读 1752·2023-02-27 22:32
阅读 1259·2023-02-27 22:27
阅读 2065·2023-01-20 08:28