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>

 

转载于:https://www.cnblogs.com/xiaoqian1993/p/4568076.html