jQuery實作清單自動滾動循環滾動展示新聞_jquery

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

效果圖：

上乾貨

html：

複製程式碼 程式碼如下:

• aaaaaaaaaaaaaaa


• bbbbbbbbbbbbbbb


• ccccccccccccccccc


• ddddddddddddddd


• eeeeeeeeeeeeeee


• ffffffffffffffff


• ggggggggggggggg

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