jquery无缝间歇向上滚动

jquery无缝间歇向上滚动

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

   })

}

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>罗氏</a></li>

        <li><a>瑞声达</a></li>

        <li><a>未添加1</a></li>

        <li><a>未添加2</a></li>

        <li><a>未添加3</a></li>

        <li><a>未添加4</a></li>

        <li><a>西门子</a></li>

        <li><a>欧姆龙</a></li>

    </ul>

</div>