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;
}
關(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等等）的理解和運用，需要注意的是，如果不加.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等等）的理解和運用，需要注意的是，如果不加.trigger("mouseleave")，在網(wǎng)頁初始化的時候列表不會滾動，還有appendTo能直接移動元素，就這些了。
相關(guān)文章
這個是select版的，若想美化某些樣式是不支持得，大家可以使用div模擬版，下面小編給大家介紹下jQuery雙向列表選擇器select版，感興趣的朋友一起看看吧2016-11-11
jquery多行滾動/向左或向上滾動/響應(yīng)鼠標實現(xiàn)思路及代碼
多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦2013-01-01
jquery學(xué)習(xí)總結(jié)（超級詳細）
本文僅針對jquery的部分知識點做總結(jié)，更為全面的可以去官網(wǎng)看中文文檔?？梢愿鼮樵敿毜牧私鈐query及其特性。2014-09-09
jquery 導(dǎo)航條的效果，主要是針對css的控制。2010-05-05
jQuery 在光標定位的地方插入文字的插件的實現(xiàn)代碼，通過獲取光標位置，然后插入文字2012-05-05
這篇文章主要介紹了jquery實現(xiàn)焦點圖片隨機切換效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能,需要的朋友可以參考下2017-10-10
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細介紹下使用jQuery實現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼,通過自定義fixedMenu方法實現(xiàn)點擊下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果示例
這篇文章主要介紹了jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06