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