今天带来基于jQuery实现列表循环滚动小技巧(超简单)教程详解
看到一个很好的思路,记录一下
之前使用jQuery做滚动效果,在这两篇文章里有写:文一、文二,分别使用了scrollLeft()与scrollTop()、scroll()来实现
后来看到一个demo,觉得思路很妙,想着可以用来做列表内容项的滚动,效果大概是这样的:
思路是这样的:
只要能够不停地把第一个item移动到末尾,其余的自会往上填补空缺,填补的过程用动画放慢些,就能有不断滚动的视觉效果了(数组删了第一个元素,再在末尾加上这个元素,等于把第一个元素移动到末尾;元素总量没有改变,但位置全发生了改变)
代码:
// 要填充的数据 var data = { infoItem : [ "第1行:安之安之安之安之安之安之安之安之安之安之安", "第2行:阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马", "第3行:天地之悠悠天地之悠悠天地之悠悠天地之悠悠天" ] } // 将数据动态填充到页面种 var infoList = [] for (let i = 0; i ${data.infoItem[i]}