Jquery实现无缝向上循环滚动列表的特效


Posted in jQuery onFebruary 13, 2019

效果呈现

整个列表间隔设定的时间向上移动一个item的高度

html结构:

<div class="slide-title">
  <span>title1</span>
  <span>title2</span>
  <span>title3</span>
 </div>
 <div class="slide-container"><!--css设置时,注意高度是显示多少个item,如:item的高度是30px,显示3个,高度则是 3*30 = 90px -->
  <ul class="slide-list js-slide-list">
   <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
  </ul>
 </div>

实现思路:

获得js-slide-list下第一个li元素的高度,对它的height或marginTop进行一个从有到无的动画变化,代码如下:

var doscroll = function(){
 var $parent = $('.js-slide-list');
 var $first = $parent.find('li:first');
 var height = $first.height();
 $first.animate({
  height: 0 //或者改成: marginTop: -height + 'px'
  }, 500, function() {// 动画结束后,把它插到最后,形成无缝
  $first.css('height', height).appendTo($parent);
  // $first.css('marginTop', 0).appendTo($parent);
 });
};
setInterval(function(){doscroll()}, 2000);

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现本地存储
Dec 22 jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
You might like
建站常用13种PHP开源CMS比较
2009/08/23 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
node.js超时timeout详解
2014/11/26 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python3中的md5加密实例
2018/05/29 Python
python实现flappy bird游戏
2018/12/24 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
药店主任岗位责任制
2014/02/10 职场文书
团队队名口号大全
2014/06/06 职场文书
个人违纪检讨书
2014/09/15 职场文书
教师个人总结范文
2015/02/11 职场文书
2016年情人节广告语
2016/01/28 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
python3实现无权最短路径的方法
2021/05/12 Python
Python 多线程处理任务实例
2021/11/07 Python
Python matplotlib绘制雷达图
2022/04/13 Python