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);

总结

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