前端开发

 首页 > 前端开发 > jquery教程 > 基于jQuery实现列表循环滚动小技巧(超简单)最新评论添加评论

基于jQuery实现列表循环滚动小技巧(超简单)最新评论添加评论

分享到:
【字体:
导读:
         [导读] 基于jQuery实现列表循环滚动小技巧(超简单)...

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

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

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

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

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

代码:

// 要填充的数据
 var data = {
     infoItem : [
         "第1行:安之安之安之安之安之安之安之安之安之安之安",
         "第2行:阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马",
         "第3行:天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 将数据动态填充到页面种
 var infoList = []
 for (let i = 0; i ${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)
分享到:
浅谈JQUERY的each方法详细介绍:DOM遍历...
今天浅谈JQUERY的each方法,JQ有一个万能的迭代【遍历】方法,each, 次方法可以遍历,数组,对象 不过次方法需要注意一点就是 return false 是 break,  return true 才是 continue,很多人都搞错了,站长也有过搞错了经历,一直以为 return true 才是 break... 详细介绍: 以每一个匹配的元素作为上下文来执行一个函数。 ...
jquery标签选择器应用示例详解最新评论添...
今天带来jquery标签选择器应用示例详解教程详解本文实例为大家分享了jquery标签选择器应用的具体代码,供大家参考,具体内容如下 1、统一设置div内容 可以用标签选择器来选择所有的 div 元素; 设置内容   2、jQuery获取表单的全部数据 serialize()方法,...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……