jQuery實(shí)現(xiàn)列表自動循環(huán)滾動鼠標(biāo)懸停時停止?jié)L動
更新時間:2013年09月06日 17:47:59 作者:
需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞并且鼠標(biāo)懸停時停止?jié)L動并提示,離開后,繼續(xù)滾動,具體實(shí)現(xiàn)如下,喜歡的朋友可以參考下
需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞(公告、活動、圖片等等),并且,鼠標(biāo)懸停時停止?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;
}
關(guān)鍵是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等等)的理解和運(yùn)用,需要注意的是,如果不加.trigger("mouseleave"),在網(wǎng)頁初始化的時候列表不會滾動,還有appendTo能直接移動元素,就這些了。
效果圖:


上干貨
html:
復(fù)制代碼 代碼如下:
<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:
復(fù)制代碼 代碼如下:
ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}
關(guān)鍵是js文件:
復(fù)制代碼 代碼如下:
$(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等等)的理解和運(yùn)用,需要注意的是,如果不加.trigger("mouseleave"),在網(wǎng)頁初始化的時候列表不會滾動,還有appendTo能直接移動元素,就這些了。
相關(guān)文章
基于jQuery實(shí)現(xiàn)頂部導(dǎo)航欄功能
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)頂部導(dǎo)航欄功能,jQuery三級下拉列表導(dǎo)航菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁插件有很多種,做出來的效果都非常棒,這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路,非常不錯,需要的朋友可以參考下2016-08-08結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項卡(jquery版和原生JS版)
日常項目中常用到的,用jQuery和原生JS分別寫了一個. 兩種寫法均實(shí)現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當(dāng)然,稍作修改,可以在同一個頁面中應(yīng)用于多個選項卡.2010-08-08jquery tree 可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)
jquery tree 可編輯節(jié)點(diǎn),實(shí)現(xiàn)的三級菜單實(shí)現(xiàn)代碼,這里我們將為大家準(zhǔn)備了兩個。一個是鋒利的jquery中的一句話導(dǎo)航菜單實(shí)現(xiàn)代碼。非常不錯。2009-11-11