jQuery實現(xiàn)列表自動循環(huán)滾動鼠標懸停時停止?jié)L動

更新時間：2013年09月06日 17:47:59 作者：

需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞并且鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，具體實現(xiàn)如下，喜歡的朋友可以參考下

需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞（公告、活動、圖片等等），并且，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動。

效果圖：

上干貨
html：

復制代碼代碼如下:

 
<div id="news"> 
<ul> 
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> 
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li> 
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li> 
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li> 
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li> 
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li> 
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li> 
</ul> 
</div> 

css：

復制代碼代碼如下:

 
ui,li { 
list-style: none; 
} 
#news{ 
height: 75px; 
overflow: hidden; 
} 

關鍵是js文件：

復制代碼代碼如下:

 
$(function() { 
var $this = $("#news"); 
var scrollTimer; 
$this.hover(function() { 
clearInterval(scrollTimer); 
}, function() { 
scrollTimer = setInterval(function() { 
scrollNews($this); 
}, 2000); 
}).trigger("mouseleave"); 

function scrollNews(obj) { 
var $self = obj.find("ul"); 
var lineHeight = $self.find("li:first").height(); 
$self.animate({ 
"marginTop": -lineHeight + "px" 
}, 600, function() { 
$self.css({ 
marginTop: 0 
}).find("li:first").appendTo($self); 
}) 
} 
}) 

主要就是對hover、setInterval、clearInterval、animate這些方法以及marginTop屬性（marginLeft、top、left等等）的理解和運用，需要注意的是，如果不加.trigger("mouseleave")，在網(wǎng)頁初始化的時候列表不會滾動，還有appendTo能直接移動元素，就這些了。

您可能感興趣的文章: