Utiliser jQuery pour implémenter des conseils de défilement de boucle de liste

Voir une bonne idée, l'enregistrer

J'ai utilisé jQuery pour faire l'effet de défilement avant, et j'ai écrit dans ces deux articles : Wen 1 et Wen 2 , qui utilisaient respectivement scrollLeft(), scrollTop(), scroll() pour obtenir

Plus tard, quand j'ai vu une démo, j'ai pensé que l'idée était très bonne. J'ai pensé qu'elle pourrait être utilisée pour faire défiler les éléments de contenu de la liste. L'effet est probablement comme ceci :

L'idée est la suivante :
tant que vous pouvez continuer à déplacer le premier élément jusqu'à la fin, le reste remplira le poste vacant, et le processus de remplissage sera ralenti par l'animation, et vous pouvez avoir un effet visuel de défilement continu (le tableau est supprimé Le premier élément, et ajouter cet élément à la fin équivaut à déplacer le premier élément à la fin ; le nombre total d'éléments n'a pas changé, mais les positions ont toutes changé)

Code:

 // 要填充的数据
 var data = {
    
    
     infoItem : [
         "<strong>第1行：</strong>安之安之安之安之安之安之安之安之安之安之安",
         "<strong>第2行：</strong>阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马",
         "<strong>第3行：</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 将数据动态填充到页面种
 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秒执行一次（变换一次）
 var timer = null;
 timer = setInterval(function () {
    
    
     // 将第一行item移到最后一行，其他的往上挪填补空缺位
     var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp );
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

section html et styles :

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

L'effet actuel est celui-ci :

Plus l'animation de l'effet de glissement :

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

Continuez à glisser, et lorsque vous atteignez la position où vous pouvez ajouter un nouvel élément, déclenchez l'ajout d'un nouvel élément :

// 设置计时器，每隔2秒执行一次（变换一次）--与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)

Vous pouvez obtenir l'effet du début