怎么新建MySQL数据库
发布时间：2022-08-08
作者：admin
阅读：762
阅读：762
这篇文章主要讲解了“用JS做列表循环滚动涉及哪些知识，具体怎样做”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"用JS做列表循环滚动涉及哪些知识，具体怎样做"的内容，大家可以关注群英网络的其它相关文章。
先介绍几个属性
clientHeight元素的高度clientTop元素顶部边框的宽度scrollTop滚动条遮挡的部分的高度（包含border）scrollHeight整个内容的高度（包含border）offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离
<!DOCTYPE html>
<html lang="en">
<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" class="parent">
<table border="1" cellpadding="18" cellspacing="0" id="child" class="child">
</table>
<div id="cloneChild" class="child"></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>
上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"用JS做列表循环滚动涉及哪些知识，具体怎样做"的内容，大家可以关注群英网络的其它相关文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理