好资源导航 » 文章资讯 » Jquery实现无缝向上循环滚动列表的特效

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

2023-08-29 02:49:04 75

效果呈现

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

html结构：


title1
title2
title3

item1item1item1 item2item2item2 item2item2item2

实现思路：

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

vardoscroll=function(){
var$parent=$('.js-slide-list');
var$first=$parent.find('li:first');
varheight=$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);

总结

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐