js实现列表循环滚动

3403771864 发布于2022-09-15 22:25 / 948人阅读

　 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>

上述就是全部内容，请大家多多关注后续更多精彩内容。

云服务器 GPU云服务器 js循环滚动循环滚动css js js不间断循环滚动图片列表滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127740.html

js实现列表自动滚动循环播放

　　列表自动滚动循环播放不要太爽，下面看看具体代码：　　1.实现效果图　　鼠标移入，暂停滚动；鼠标移出，继续滚动；　　2.原理　　第一：要实现无缝衔接，在原有ul后面还要有一个一样内容的ul；　　第二：在最外层div为可视区域，设overflow：hidden；　　第三：2个ul的高度 > 外层可视div高度，才能滚动；　　3.实现代码　　html：　　 　...

3403771864 2022-09-12 19:55 评论0 收藏0
jquery特效：无缝向上循环滚动列表

摘要：效果呈现整个列表间隔设定的时间向上移动一个的高度结构设置时，注意高度是显示多少个如的高度是，显示个，高度则是实现思路获得下第一个元素的高度，对它的或进行一个从有到无的动画变化，代码如下或者改成动画结束后，把它插到最后，形成无缝效果呈现整个列表间隔设定的时间向上移动一个item的高度 html结构： title1 title2 ...

hot_pot_Leo 2019-08-21 10:19 评论0 收藏0
那些年，前端学习之路的疑难杂症（四）：面试中遇到的3个问题概览

摘要：闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数，循环一个整数数组，延迟秒打印这个数组中每个元素的索引。文章来源：http://mp.weixin.qq.com/s/vs0... 前言在公众号上看到了这篇文章，觉得很有用，有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里，我会详细介绍这三...

gecko23 2019-08-20 15:08 评论0 收藏0
vue实现列表无缝循环滚动

　　vue如何为大家展示列表无缝循环滚动，以下就是具体代码内容如下：　　功能介绍：　　在PC端、大数据、官网、后台管理平台开发项目中，时常会要求展示这种列表循环滚动。　　大致需求：　　1、列表内容可以循环展示；　　2、每条内容展示时间间距几秒；　　3、可以形成走马灯样式效果；　　整体思路：　　1、使用两个定时器嵌套实现；　　2、需要两个相同容器存放同样内容，实现无缝衔接效果；　　效果展示：　　&l...

3403771864 2022-09-14 22:32 评论0 收藏0