jquery 틈새 없이 간헐적으로 위로 스크롤 (인터럽트 스크롤)

3881 단어 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>

좋은 웹페이지 즐겨찾기