基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
更新時間：2021年08月31日 16:50:18 作者：安之ccy
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(xiàn)思路代碼，一起看看吧
看到一個很好的思路，記錄一下
之前使用jQuery做滾動效果，在這兩篇文章里有寫：文一、文二，分別使用了scrollLeft()與scrollTop()、scroll()來實現(xiàn)
后來看到一個demo，覺得思路很妙，想著可以用來做列表內容項的滾動，效果大概是這樣的：
思路是這樣的：
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了（數(shù)組刪了第一個元素，再在末尾加上這個元素，等于把第一個元素移動到末尾；元素總量沒有改變，但位置全發(fā)生了改變）
代碼：
// 要填充的數(shù)據(jù)
var data = {
infoItem : [
"<strong>第1行：</strong>安之安之安之安之安之安之安之安之安之安之安",
"<strong>第2行：</strong>陽光彩虹小白馬陽光彩虹小白馬陽光彩虹小白馬",
"<strong>第3行：</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
]
}
// 將數(shù)據(jù)動態(tài)填充到頁面種
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(""))
// 設置計時器，每隔2秒執(zhí)行一次（變換一次）
var timer = null;
timer = setInterval(function () {
// 將第一行item移到最后一行，其他的往上挪填補空缺位
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;
}
目前效果是這樣的：
再加上滑動效果的動畫：
.item:first-child {
animation: move 2s linear;
}
@keyframes move {
100% {
margin-top: -80px;
}
}
不斷滑動，到達可以加入新item的位置時，觸發(fā)新item的加入：
// 設置計時器，每隔2秒執(zhí)行一次（變換一次）--與animation動畫時設置時間一致
var timer = null;
timer = setInterval(function () {
if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
// 將第一行item移到最后一行，其他的往上挪填補空缺位
var infoItemTmp = infoList.shift();
$(".info-wrapper").append(infoItemTmp);
$(".item:first").remove();
infoList.push(infoItemTmp)
}
}, 2000)
就可以得到開頭的效果了
到此這篇關于基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)的文章就介紹到這了,更多相關jQuery列表循環(huán)滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用jquery模擬a標簽的click事件無法實現(xiàn)跳轉的解決
這篇文章主要給大家介紹了關于使用jquery模擬a標簽的click事件無法實現(xiàn)跳轉的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了jQuery控制div實現(xiàn)隨滾動條滾動效果,對比分析了兩種實現(xiàn)方法供大家參考選擇,需要的朋友可以參考下2016-06-06
jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法
這篇文章主要介紹了jQuery控制input只能輸入數(shù)字和兩位小數(shù)的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
今天給大家分享一款頁面無縫滾動的jquery.scroll插件。 支持上下左右，淡入淡出，滾動時間設置，動畫時間設置，鼠標經(jīng)過是否停止設置，滾動鼠標液動條看下頁面的切換效果。該插件適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。2015-04-04
jquery實現(xiàn)仿JqueryUi可拖動的DIV實例
這篇文章主要介紹了jquery實現(xiàn)仿JqueryUi可拖動的DIV,實例分析了jquery模擬jqueryUI實現(xiàn)div拖動的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JQuery中DOM事件綁定用法,實例分析了bind方法綁定事件的相關技巧,需要的朋友可以參考下2015-06-06
jquery dataview數(shù)據(jù)視圖插件使用方法
這篇文章主要介紹了jquery dataview數(shù)據(jù)視圖插件使用方法，數(shù)據(jù)填充與視圖更新利器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片切換代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
今天無意中發(fā)現(xiàn)了這個插件，和大家分享一下，功能和樣式都很強大，調用也很方便，而且支持鎖定屏幕的效果，插件的效果圖如下，更多效果和皮膚請到官網(wǎng)下載！2011-08-08
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01