DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現列表自動循環滾動鼠標懸停時停止滾動
jQuery實現列表自動循環滾動鼠標懸停時停止滾動
編輯:JQuery特效代碼     
需要在頁面中一個小的區域循環滾動展示新聞(公告、活動、圖片等等),並且,鼠標懸停時停止滾動並提示,離開後,繼續滾動。

效果圖:
 
上干貨
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"),在網頁初始化的時候列表不會滾動,還有appendTo能直接移動元素,就這些了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved