jQuery无缝间歇向上滚动 - Web前端

在页面上看到过很多的滚动效果，比如向上、下、左、右滚动。不同的产品用到不同的效果，今天介绍下JQuery无缝间歇向上滚动的方法。不多说，干货拿起：

首先看HTML代码，如下：

<style type="text/CSS">
.renav{
    width:200px;
    height:150px;
    line-height:21px;
    overflow:hidden;
    background:#FFFFFF;
}
.renav li{
    height:21px;
}
</style>
<div class="renav">
    <ul style="margin-top: 0px;">
        <li><a>Web前端之家</a></li>
        <li><a>WEB前端之家</a></li>
        <li><a>web前端之家1</a></li>
        <li><a>Web前端之家2</a></li>
        <li><a>WEB前端之家3</a></li>
        <li><a>Web前端之家4</a></li>
        <li><a>Web前端之家</a></li>
        <li><a>Web前端之家</a></li>
    </ul>
</div>

然后看下JS代码，如下：

$(function(){
    var $this = $(".renav");
    var scrolltimer;
    $this.hover(function(){
          clearinterval(scrollTimer);
     },function(){
       scrollTimer = SetInterval(function(){
                     scrollNews( $this );
                }, 2000 );
    }).trigger("mouSEOut");
});
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);
   })
}

我们新建一个文件，然后把代码复制进去即可了，别忘了调用下jQuery库文件。这里特别要强调的，列表的内容高度要比我们外框架的高度要高，否则会出现闪动的问题。