快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)列表循環(huán)滾動(dòng)小技巧(超簡(jiǎn)單)

更新時(shí)間：2021年08月31日 16:50:18 作者：安之ccy

只要能夠不停地把第一個(gè)item移動(dòng)到末尾，其余的自會(huì)往上填補(bǔ)空缺，填補(bǔ)的過(guò)程用動(dòng)畫(huà)放慢些，就能有不斷滾動(dòng)的視覺(jué)效果了，這種效果基于jquery怎么實(shí)現(xiàn)呢？下面小編給大家?guī)?lái)了jQuery列表循環(huán)滾動(dòng)效果的實(shí)現(xiàn)思路代碼，一起看看吧

看到一個(gè)很好的思路，記錄一下

之前使用jQuery做滾動(dòng)效果，在這兩篇文章里有寫(xiě)：文一、文二，分別使用了scrollLeft()與scrollTop()、scroll()來(lái)實(shí)現(xiàn)

后來(lái)看到一個(gè)demo，覺(jué)得思路很妙，想著可以用來(lái)做列表內(nèi)容項(xiàng)的滾動(dòng)，效果大概是這樣的：
在這里插入圖片描述

思路是這樣的：
只要能夠不停地把第一個(gè)item移動(dòng)到末尾，其余的自會(huì)往上填補(bǔ)空缺，填補(bǔ)的過(guò)程用動(dòng)畫(huà)放慢些，就能有不斷滾動(dòng)的視覺(jué)效果了（數(shù)組刪了第一個(gè)元素，再在末尾加上這個(gè)元素，等于把第一個(gè)元素移動(dòng)到末尾；元素總量沒(méi)有改變，但位置全發(fā)生了改變）

代碼：

// 要填充的數(shù)據(jù)
 var data = {
     infoItem : [
         "<strong>第1行：</strong>安之安之安之安之安之安之安之安之安之安之安",
         "<strong>第2行：</strong>陽(yáng)光彩虹小白馬陽(yáng)光彩虹小白馬陽(yáng)光彩虹小白馬",
         "<strong>第3行：</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 將數(shù)據(jù)動(dòng)態(tài)填充到頁(yè)面種
 var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
     let infoStr = `<div class="item">${data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 // 設(shè)置計(jì)時(shí)器，每隔2秒執(zhí)行一次（變換一次）
 var timer = null;
 timer = setInterval(function () {
     // 將第一行item移到最后一行，其他的往上挪填補(bǔ)空缺位
     var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp );
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

html和樣式部分：

<div class="container">
        <div class="wrapper">
            <div class="info">
                <div class="info-wrapper"></div>
            </div>
        </div>
    </div>

.constainer {
    width: 900px;
    height: 400px;
    border: 2px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-content: center;
}

.info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.info-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item {
    border: 2px solid #ccc;
    border-left: 4px solid orange;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 20px;
}

目前效果是這樣的：

在這里插入圖片描述

再加上滑動(dòng)效果的動(dòng)畫(huà)：

.item:first-child {
    animation: move 2s linear;
}
@keyframes move {
    100% {
        margin-top: -80px;
    }
}

不斷滑動(dòng)，到達(dá)可以加入新item的位置時(shí)，觸發(fā)新item的加入：

// 設(shè)置計(jì)時(shí)器，每隔2秒執(zhí)行一次（變換一次）--與animation動(dòng)畫(huà)時(shí)設(shè)置時(shí)間一致
var timer = null;
timer = setInterval(function () {
    if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
        // 將第一行item移到最后一行，其他的往上挪填補(bǔ)空缺位
        var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)

就可以得到開(kāi)頭的效果了

到此這篇關(guān)于基于jQuery實(shí)現(xiàn)列表循環(huán)滾動(dòng)小技巧(超簡(jiǎn)單)的文章就介紹到這了,更多相關(guān)jQuery列表循環(huán)滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: