亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實(shí)現(xiàn)列表自動滾動循環(huán)滾動展示新聞

 更新時間：2014年08月22日 11:01:10   投稿：whsnow  
jQuery實(shí)現(xiàn)列表自動滾動循環(huán)滾動展示新聞，鼠標(biāo)懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，實(shí)現(xiàn)的代碼如下，需要的朋友可以看看

需要在頁面中一個小的區(qū)域循環(huán)滾動展示新聞（公告、活動、圖片等等），并且，鼠標(biāo)懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動。

效果圖：

上干貨

html：

復(fù)制代碼 代碼如下:

<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：
復(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)文章

最新評論