基于jQuery实现列表循环滚动小技巧(超简单)-自学php网

基于jQuery实现列表循环滚动小技巧(超简单)

来源：自学PHP网时间：2021-08-31 23:06 作者：小飞侠阅读:次

[导读] 基于jQuery实现列表循环滚动小技巧(超简单)...

今天带来基于jQuery实现列表循环滚动小技巧(超简单)教程详解

看到一个很好的思路，记录一下

之前使用jQuery做滚动效果，在这两篇文章里有写：文一、文二，分别使用了scrollLeft()与scrollTop()、scroll()来实现

后来看到一个demo，觉得思路很妙，想着可以用来做列表内容项的滚动，效果大概是这样的：

思路是这样的：
只要能够不停地把第一个item移动到末尾，其余的自会往上填补空缺，填补的过程用动画放慢些，就能有不断滚动的视觉效果了（数组删了第一个元素，再在末尾加上这个元素，等于把第一个元素移动到末尾；元素总量没有改变，但位置全发生了改变）

代码：

// 要填充的数据
 var data = {
     infoItem : [
         "第1行：安之安之安之安之安之安之安之安之安之安之安",
         "第2行：阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马",
         "第3行：天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 将数据动态填充到页面种
 var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
     let infoStr = `${data.infoItem[i]}`
     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)

html和样式部分：

.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的位置时，触发新item的加入：

// 设置计时器，每隔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)

就可以得到开头的效果了

到此这篇关于基于jQuery实现列表循环滚动小技巧(超简单)的文章就介绍到这了,更多相关jQuery列表循环滚动内容请搜索自学php网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学php网！

以上就是关于基于jQuery实现列表循环滚动小技巧(超简单)全部内容,感谢大家支持自学php网。

浅谈JQUERY的each方法

jquery标签选择器应用示例详解

子栏目

基于jQuery实现列表循环滚动小技巧(超简单)

最新评论

添加评论

更多文章推荐

添加评论