一起来玩玩基于JS的无缝滚动通用动画效果 - Web前端

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

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

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

单行：

 <div class="PRize-databox">
    <ul>
        <li>
            <span class="pr-num">180****2223</span>
            <span>获得了</span>
            <span class="pr-color">300 + 1000元京东E卡</span>
        </li>
    </ul>
</div>

多行：

 <div class="prize-databox">
    <ul>
        <li>
            <span class="pr-num">180****2223</span>
            <span>获得了</span>
            <span class="pr-color">300 + 1000元京东E卡</span>
        </li>
        <li>
            <span class="pr-num">139****2545</span>
            <span>获得了</span>
            <span class="pr-color">300 + 1000元京东E卡</span>
        </li>
    </ul>
</div>

最重要的是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"。就是这么便捷。

标签：效果动画WebJS