Jquery如何实现无缝向上循环滚动列表的特效
小编给大家分享一下Jquery如何实现无缝向上循环滚动列表的特效,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
襄阳网站建设公司创新互联,襄阳网站设计制作,有大型网站制作公司丰富经验。已为襄阳超过千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的襄阳做网站的公司定做!
效果呈现
整个列表间隔设定的时间向上移动一个item的高度
html结构:
title1 title2 title3
- item1item1item1
- item2item2item2
- item2item2item2
实现思路:
获得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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
看完了这篇文章,相信你对“Jquery如何实现无缝向上循环滚动列表的特效”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文题目:Jquery如何实现无缝向上循环滚动列表的特效
标题网址:http://azwzsj.com/article/iigisd.html