Jquery实现无缝向上循环滚动列表的特效
更新时间:2019年02月13日 08:47:36 作者:young_591693
今天小编就为大家分享一篇关于Jquery实现无缝向上循环滚动列表的特效,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
效果呈现
整个列表间隔设定的时间向上移动一个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);
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
可兼容IE的获取及设置cookie的jquery.cookie函数方法
在使用IE来测试的时候,发现Discuz中的common.js里面的getcookie和setcookie这两个方法子啊IE下不起作用,因此有了jquery.cookie.js的由来,感兴趣的朋友可以参考下2013-09-09Jquery实现select multiple左右添加和删除功能的简单实例
下面小编就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
这篇文章主要介绍了Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready的相关资料,需要的朋友可以参考下2015-11-11jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
这篇文章主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-08-08
最新评论