jQuery實作清單自動循環滾動滑鼠懸停時停止捲動_jquery

需要在頁面中一個小的區域循環滾動展示新聞（公告、活動、圖片等等），並且，滑鼠懸停時停止滾動並提示，離開後，繼續滾動。

效果圖：
 
上乾貨
html：

複製代碼

複製代碼

複製代碼
>
程式碼如下:

• aaaaaaaaaaaaaaaaaaaaaaa


• bbbbbbbbbbbbbbb


• ccccccccccccccc

ddddddddddddddd

ddddddddddddddd

eeeeeeeeeeeeeee

fffffffffffffff

ggggggggggggggg

css :

複製程式碼


程式碼如下:

ui,li {
list-style: none;
}

#news{ height: 75px; overflow: hidden; } 關鍵是js檔案：

關鍵是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")，在網頁初始化的時候列表不會滾動，還有appendTo能直接移動元素，就這些了。