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实现简单的抽奖游戏
May 05 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现下载图片功能
Jul 18 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php多文件上传实现代码
2014/02/20 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
ext 代码生成器
2009/08/07 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python实现按任意键继续执行程序
2016/12/30 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python实现键盘输入的实操方法
2019/07/16 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python中提高pip install速度
2020/02/14 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
what is the difference between ext2 and ext3
2015/08/25 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
婚庆司仪主持词
2014/03/15 职场文书
捐助倡议书范文
2014/04/15 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
python异步的ASGI与Fast Api实现
2021/07/16 Python