欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用JS、CSS實現(xiàn)列表自動滑動滾動效果實例

 更新時間：2024年07月06日 14:33:48   作者：是洋洋a  
這篇文章主要給大家介紹了關(guān)于利用JS、CSS實現(xiàn)列表自動滑動滾動效果的相關(guān)資料,本人在項目中遇到這樣的需求,親自來做的,通過html頁面配合js,css來做出的列表自動滑動,需要的朋友可以參考下

零.業(yè)務(wù)需求

這幾天在做大屏項目，對于大屏有很多信息需要實時滾動，廢了點力氣學(xué)的明明白白的，特來記錄供大家學(xué)習(xí)。

0.1實現(xiàn)效果

一.邏輯分析

1.1滑動窗口和滾動條

當(dāng)我們使用<table>或者<ul>標(biāo)簽時，我們可以制作一個滾動條，通過滾動條來實現(xiàn)我們想要查看的內(nèi)容。

在滾動窗口內(nèi)，“已經(jīng)滾動過去”的區(qū)域我們稱為：“scrollHeight”，“還未滾動到”的 區(qū)域我們稱為：“scrollBottom”，“當(dāng)前顯示區(qū)域”稱為：“scrollNow”。

我們再用一張圖來描述一下，上面三個概念：

（可能有點丑...）

為方便，上面這一整個區(qū)域(scrollTop、scrollNow、scrollBottom)，我們統(tǒng)稱為：“滑動窗口”

1.2邏輯構(gòu)思

如果我們有：“兩份一模一樣的數(shù)據(jù)順序排列在一起形成一份數(shù)據(jù)”，再將這一份數(shù)據(jù)中的“元素”挨個展示在我們的“scrollNow”區(qū)域中，當(dāng)這份數(shù)據(jù)的最后一個“元素”被展示時，我們重新讓一整份數(shù)據(jù)從頭開始，這樣就在視覺上實現(xiàn)了滾動的效果。

在這里，有一個關(guān)鍵性的問題：“兩份數(shù)據(jù)的長度一定要大于顯示區(qū)域的長度，否則將無法實現(xiàn)滑動”

至于為什么，大家思考一下就行，當(dāng)我們的數(shù)據(jù)滑動時，滑動過去的數(shù)據(jù)被“隱藏”了，但并不是消失了！

如果我們的“可顯示區(qū)域”大于“數(shù)據(jù)”的長度，那么就會出現(xiàn)下面的情況：

當(dāng)顯示區(qū)域的長度足夠容納：“所有的數(shù)據(jù)”，此時還有“滑動”的必要嗎？？？

我們“滑動”的原因是因為：“數(shù)據(jù)量太大，展示區(qū)域有限，故讓它滑動方便查看”

1.3偽代碼實現(xiàn)

在js中，有幾個屬性：

“scrollTop”用來“設(shè)置或者獲取”元素的已滾動的上部“不可見區(qū)域”的高度，這個概念就是我們上述講的“scrollTop”(已經(jīng)滾動過的區(qū)域)

“scrollHeight”用來“返回”元素所有內(nèi)容的“總高度”(包括折疊不見的)，這個就是我們上述所說的(scrollTop+scrollNow+scrollBottom)

利用這幾個屬性，我們可以設(shè)定一個計時器用來計時，每次計時器加值時，scrollTop的值隨之加值(向上滾動)，從而實現(xiàn)了滾動。

二.代碼實現(xiàn)

2.1創(chuàng)建骨架

我們先創(chuàng)建一個div盒子，作為整個列表的骨架：

    <div id="review_box">
            <ul id="comment1">
                <li>第一條</li>
                <li>第二條</li>
                <li>第三條</li>
                <li>第四條</li>
                <li>第五條</li>
                <li>第六條</li>
            </ul>
            <ul id="comment2"></ul>
    </div>

其中“comment1”<ul>是原數(shù)據(jù)，“comment2”<ul>是原數(shù)據(jù)的副本，這兩部分?jǐn)?shù)據(jù)組合在一起形成我們的“一整個數(shù)據(jù)”

而<li>就是我們的“元素”，方便起見我這里內(nèi)置數(shù)據(jù)，后面根據(jù)需要可以自己再寫一個函數(shù)添加數(shù)據(jù)。

2.2創(chuàng)建樣式

只有骨架是不行的，沒有用到CSS美觀是很丑的，如果不使用CSS，那么就是下圖這個樣子：

為此我們使用如下代碼：

    <style>
        div {
            width: 100px;
            height: 100px;      /*列表的長度*/
            overflow: hidden;/* 必須 */
            margin: 50px auto;
            border: 1px solid red;
            text-align: center;
        }
        ul {
            margin: 0;
            padding: 0;         /*元素居中*/
            list-style: none;   /*去掉元素前面的標(biāo)簽*/
        }
        li{
            height: 20px;  /*元素高度,數(shù)據(jù)的高度等于元素個數(shù)乘元素高度*/
        }
    </style>

2.3JS代碼

我們先創(chuàng)建一個“roll”滾動函數(shù)，用來實現(xiàn)控制“鼠標(biāo)懸停在列表上時暫停滾動”、“鼠標(biāo)離開列表時繼續(xù)滾動”

我們分別使用：“onmouseover”和“onmouseout”兩個事件來完成。

實現(xiàn)“向上滾動”和“向下滾動”在js中有些許不同，這里先以“向上滾動”為例

        function roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 開始無滾動時設(shè)為0
            var timer = setInterval(rollStart, t); // 設(shè)置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
            // 鼠標(biāo)移入div時暫停滾動
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }

我們再創(chuàng)建一個“rollStart”函數(shù)，用來啟動“自動滑動”

        function rollStart() {
            // 上面聲明的DOM對象為局部對象需要再次聲明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滾動不斷給scrollTop的值+1,當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop += 1;
            }
    }

最后，在代碼的最前面加一句：

         window.onload = roll(20);

用來代碼在頁面加載完畢時自動啟動，一切就完成啦??！

附：

如果想要列表向下滾動，我們只改動三處數(shù)值即可：

ulbox.scrollTop = ul1.scrollHeight; // 開始無滾動時設(shè)列表最長高度,用來表示到底了

 上面將初始“scrollTop”置為最大值，表示此時數(shù)據(jù)底部到底了，即無法繼續(xù)向下滑動，只能向上滑動

// 正常滾動不斷給scrollTop的值減一,當(dāng)滾動高度小于等于0時，需要重新為最大高度
if (ulbox.scrollTop > 0) {
    ulbox.scrollTop = ul1.scrollHeight;
}
else {
    ulbox.scrollTop -= 1;
}

上面控制“scrollTop”的值每次減一，如果小于等于0了，說明此時數(shù)據(jù)頂部到底了，即無法繼續(xù)向上滑動，只能向下滑動

值得注意：

若向下滑動，對應(yīng)的數(shù)據(jù)也應(yīng)是逆置的，否則將會出現(xiàn)部分?jǐn)?shù)據(jù)無法正常滑動：

    <div id="review_box">
            <ul id="comment1">
                <li>第六條</li>
                <li>第五條</li>
                <li>第四條</li>
                <li>第三條</li>
                <li>第二條</li>
                <li>第一條</li>
            </ul>
            <ul id="comment2"></ul>
    </div>

 不過若此時(列表長度等于原數(shù)據(jù)長度[不是整個數(shù)據(jù)]的高度,那么數(shù)據(jù)可以不用逆置)

三.全部代碼

下面代碼，復(fù)制粘貼即可使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;      /*列表的長度*/
            overflow: hidden;/* 必須 */
            margin: 50px auto;
            border: 1px solid red;
            text-align: center;
        }
        ul {
            margin: 0;
            padding: 0;         /*元素居中*/
            list-style: none;   /*去掉元素前面的標(biāo)簽*/
        }
        li{
            height: 30px;  /*元素高度,數(shù)據(jù)的高度等于元素個數(shù)乘元素高度*/
        }
    </style>
</head>
<body>
    <div id="review_box">
            <ul id="comment1">
                <li>第一條</li>
                <li>第二條</li>
                <li>第三條</li>
                <li>第四條</li>
                <li>第五條</li>
                <li>第六條</li>
            </ul>
            <ul id="comment2"></ul>
    </div>
    <script>
         window.onload = roll(20);
  
        function roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 開始無滾動時設(shè)為0
            var timer = setInterval(rollStart, t); // 設(shè)置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
            // 鼠標(biāo)移入div時暫停滾動
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }
 
        // 開始滾動函數(shù)
        function rollStart() {
            // 上面聲明的DOM對象為局部對象需要再次聲明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滾動不斷給scrollTop的值+1,當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop += 1;
            }
    }
    </script>
</body>
</html>

總結(jié) 

到此這篇關(guān)于利用JS、CSS實現(xiàn)列表自動滑動滾動效果的文章就介紹到這了,更多相關(guān)JS實現(xiàn)列表自動滑動滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論