jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞
更新時間：2014年08月22日 11:01:10 投稿：whsnow
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，實現(xiàn)的代碼如下，需要的朋友可以看看
需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞（公告、活動、圖片等等），并且，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動。
效果圖：
上干貨
html：
復制代碼 代碼如下:
<div id="news">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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")，在網(wǎng)頁初始化的時候列表不會滾動，還有appendTo能直接移動元素，就這些了。
相關文章
jQuery+json實現(xiàn)動態(tài)創(chuàng)建復雜表格table的方法
這篇文章主要介紹了jQuery+json實現(xiàn)動態(tài)創(chuàng)建復雜表格table的方法,涉及jQuery針對json數(shù)據(jù)的解析與表格動態(tài)創(chuàng)建操作相關技巧,需要的朋友可以參考下2016-10-10
從零開始學習jQuery (八) 插播:jQuery實施方案
本篇文章屬于臨時插播, 用于介紹我在本公司的jQuery實施方案.2011-02-02
在JS中設置節(jié)點的屬性與屬性值用到setAttribute(),獲得節(jié)點的屬性與屬性值用到getAttribute(),而在jquery中，只需要用到attr()這個函數(shù)就可以了。attr是attribute（屬性）的縮寫。2016-09-09
這篇文章主要介紹了jQuery實現(xiàn)跨域的相關資料,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄薷膉query中dialog的title屬性方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了jQuery的XX如何實現(xiàn)？——2.show與鏈式調用 的相關資料，非常具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
jquery PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)
下面小編就為大家?guī)硪黄猨query PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
此文主要用Jquery實現(xiàn)滾動新聞,Jquery的強大功能，幾行代碼即可實現(xiàn)，需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jQuery隨機密碼生成的方法,實例分析了jQuery操作隨機數(shù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
優(yōu)秀js開源框架-jQuery使用手冊(1)...2007-03-03