html无缝循环滚动代码,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);