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

更新時(shí)間：2024年07月06日 14:33:48 作者：是洋洋a

這篇文章主要給大家介紹了關(guān)于利用JS、CSS實(shí)現(xiàn)列表自動(dòng)滑動(dòng)滾動(dòng)效果的相關(guān)資料,本人在項(xiàng)目中遇到這樣的需求,親自來(lái)做的,通過(guò)html頁(yè)面配合js,css來(lái)做出的列表自動(dòng)滑動(dòng),需要的朋友可以參考下

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

這幾天在做大屏項(xiàng)目，對(duì)于大屏有很多信息需要實(shí)時(shí)滾動(dòng)，廢了點(diǎn)力氣學(xué)的明明白白的，特來(lái)記錄供大家學(xué)習(xí)。

0.1實(shí)現(xiàn)效果

一.邏輯分析

1.1滑動(dòng)窗口和滾動(dòng)條

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

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

我們?cè)儆靡粡垐D來(lái)描述一下，上面三個(gè)概念：

（可能有點(diǎn)丑...）

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

1.2邏輯構(gòu)思

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

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

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

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

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

我們“滑動(dòng)”的原因是因?yàn)椋?ldquo;數(shù)據(jù)量太大，展示區(qū)域有限，故讓它滑動(dòng)方便查看”

1.3偽代碼實(shí)現(xiàn)

在js中，有幾個(gè)屬性：

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

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

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

二.代碼實(shí)現(xiàn)

2.1創(chuàng)建骨架

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

    <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ù)組合在一起形成我們的“一整個(gè)數(shù)據(jù)”

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

2.2創(chuàng)建樣式

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

為此我們使用如下代碼：

    <style>
        div {
            width: 100px;
            height: 100px;      /*列表的長(zhǎng)度*/
            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ù)的高度等于元素個(gè)數(shù)乘元素高度*/
        }
    </style>

2.3JS代碼

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

我們分別使用：“onmouseover”和“onmouseout”兩個(gè)事件來(lái)完成。

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

        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; // 開始無(wú)滾動(dòng)時(shí)設(shè)為0
            var timer = setInterval(rollStart, t); // 設(shè)置定時(shí)器，參數(shù)t用在這為間隔時(shí)間（單位毫秒），參數(shù)t越小，滾動(dòng)速度越快
            // 鼠標(biāo)移入div時(shí)暫停滾動(dòng)
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動(dòng)
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }

我們?cè)賱?chuàng)建一個(gè)“rollStart”函數(shù)，用來(lái)啟動(dòng)“自動(dòng)滑動(dòng)”

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

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

         window.onload = roll(20);

用來(lái)代碼在頁(yè)面加載完畢時(shí)自動(dòng)啟動(dòng)，一切就完成啦??！

附：

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

ulbox.scrollTop = ul1.scrollHeight; // 開始無(wú)滾動(dòng)時(shí)設(shè)列表最長(zhǎng)高度,用來(lái)表示到底了

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

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

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

值得注意：

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

    <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>

不過(guò)若此時(shí)(列表長(zhǎng)度等于原數(shù)據(jù)長(zhǎng)度[不是整個(gè)數(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;      /*列表的長(zhǎng)度*/
            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ù)的高度等于元素個(gè)數(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; // 開始無(wú)滾動(dòng)時(shí)設(shè)為0
            var timer = setInterval(rollStart, t); // 設(shè)置定時(shí)器，參數(shù)t用在這為間隔時(shí)間（單位毫秒），參數(shù)t越小，滾動(dòng)速度越快
            // 鼠標(biāo)移入div時(shí)暫停滾動(dòng)
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動(dòng)
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }
 
        // 開始滾動(dòng)函數(shù)
        function rollStart() {
            // 上面聲明的DOM對(duì)象為局部對(duì)象需要再次聲明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滾動(dòng)不斷給scrollTop的值+1,當(dāng)滾動(dòng)高度大于列表內(nèi)容高度時(shí)恢復(fù)為0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop += 1;
            }
    }
    </script>
</body>
</html>

總結(jié)

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

您可能感興趣的文章: