<fieldset id="k4kwo"></fieldset>

<abbr id="k4kwo"></abbr>

<ul id="k4kwo"></ul>

<del id="k4kwo"></del>

js實現列表循環滾動

3403771864 發布于2022-09-15 22:25 / 658人閱讀

　 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不間斷循環滾動圖片列表滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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