資訊專欄INFORMATION COLUMN
js實現(xiàn)列表循環(huán)滾動如何實現(xiàn)？下面是具體的代碼內(nèi)容：
知識點(diǎn)：
clientHeight元素的高度
clientTop元素頂部邊框的寬度
scrollTop滾動條遮擋的部分的高度（包含border）
scrollHeight整個內(nèi)容的高度（包含border）
offsetTop距離上一個position不為static(默認(rèn)) 的元素的頂部內(nèi)邊框的距離
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表循環(huán)滾動</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 的優(yōu)勢在于可以克隆元素的全部的屬性
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 一顯示區(qū)域的高度。再跳到 最頂部 ，正好 給人一種在不斷滾動的錯覺
if (parent.scrollTop >= child.scrollHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 20);
})()
</script>
</body>
</html>
上述就是全部內(nèi)容，請大家多多關(guān)注后續(xù)更多精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/127740.html
列表自動滾動循環(huán)播放不要太爽，下面看看具體代碼： 1.實現(xiàn)效果圖 鼠標(biāo)移入，暫停滾動； 鼠標(biāo)移出，繼續(xù)滾動； 2.原理 第一：要實現(xiàn)無縫銜接，在原有ul后面還要有一個一樣內(nèi)容的ul； 第二：在最外層div為可視區(qū)域，設(shè)overflow：hidden； 第三：2個ul的高度 > 外層可視div高度，才能滾動； 3.實現(xiàn)代碼 html： <!--vue--> ...
摘要：效果呈現(xiàn)整個列表間隔設(shè)定的時間向上移動一個的高度結(jié)構(gòu)設(shè)置時，注意高度是顯示多少個如的高度是，顯示個，高度則是實現(xiàn)思路獲得下第一個元素的高度，對它的或進(jìn)行一個從有到無的動畫變化，代碼如下或者改成動畫結(jié)束后，把它插到最后，形成無縫 效果呈現(xiàn) 整個列表間隔設(shè)定的時間向上移動一個item的高度 html結(jié)構(gòu)： title1 title2 ...
摘要：閉包能用來實現(xiàn)私有化和創(chuàng)建工廠函數(shù)等作用。關(guān)于閉包的常見面試題是這樣的寫一個函數(shù)，循環(huán)一個整數(shù)數(shù)組，延遲秒打印這個數(shù)組中每個元素的索引。 文章來源：http://mp.weixin.qq.com/s/vs0... 前言 在公眾號上看到了這篇文章，覺得很有用，有助于理解JS學(xué)習(xí)中的一些重點(diǎn)難點(diǎn)。決定把它整理下發(fā)布出來。該文章主要介紹了JS中的三個問題。在以后的幾篇文章里，我會詳細(xì)介紹這三...
vue如何為大家展示列表無縫循環(huán)滾動，以下就是具體代碼內(nèi)容如下： 功能介紹： 在PC端、大數(shù)據(jù)、官網(wǎng)、后臺管理平臺開發(fā)項目中，時常會要求展示這種列表循環(huán)滾動。 大致需求： 1、列表內(nèi)容可以循環(huán)展示； 2、每條內(nèi)容展示時間間距幾秒； 3、可以形成走馬燈樣式效果； 整體思路： 1、使用兩個定時器嵌套實現(xiàn)； 2、需要兩個相同容器存放同樣內(nèi)容，實現(xiàn)無縫銜接效果； 效果展示： &l...
閱讀 685·2023-03-27 18:33
閱讀 887·2023-03-26 17:27
閱讀 752·2023-03-26 17:14
閱讀 736·2023-03-17 21:13
閱讀 665·2023-03-17 08:28
閱讀 2083·2023-02-27 22:32
閱讀 1517·2023-02-27 22:27
閱讀 2430·2023-01-20 08:28
