动画作业无缝滚动html,一起来玩玩基于JS的无缝滚动通用动画效果

无缝滚动动画，很常用，看到很多童鞋都喜欢用插件，其实做一个简单的项目，就没那个必要了，今天就分享一种比较简单通用的方法，实现无缝滚动通用动画效果。

不管是多行还是单行，都可以适用哟，看下效果图：

效果：从下往上无缝滚动，废话不多说，直接上代码：

单行：

• 180****2223

  获得了

  300 + 1000元京东E卡

多行：

• 180****2223

  获得了

  300 + 1000元京东E卡

• 139****2545

  获得了

  300 + 1000元京东E卡

最重要的是JS代码，适用单行和多行的滚动，如下：//无缝滚动

function scrollNews(obj){

var $self = obj.find("ul:first");

var lineHeight = $self.find("li:first").height();

$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){

$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);

})

}

$(function(){

// scroll

var $this = $(".prize-databox"),

scrollTimer;

$this.hover(function(){

clearInterval(scrollTimer);

},function(){

scrollTimer = setInterval(function(){

scrollNews($this);

},3000 );

}).trigger("mouseout");

})

接下来我们只要控制prize-databox的高度，比如一行的话，就写一行的高度哟；多行的话，就控制一个框架BOX的高度即可。

有些童鞋就要问了，你这是一行行的滚动啊，我想两行或者多行一起，怎么实现？

其实原理一样，如果是静态的数据，你可以把几行绑定成一个LI里就可以了，最简单的方法；如果是动态的数据，你可以改下上面函数这里的参数"margin-top" : -lineHeight +"px"。就是这么便捷。