jquery無縫向上滾動實現(xiàn)代碼
更新時間：2013年03月29日 16:34:24 作者：
向上滾動的效果想必大家都見過吧!無縫間歇向上滾動應(yīng)該也不會陌生吧，接下來為大家介紹下jquery實現(xiàn)無縫間歇滾動，感興趣的朋友可以參考下哈，希望可以幫助到你們
JS部份
$(function(){
var $this = $(".renav");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 2000 );
}).trigger("mouseout");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height();
$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
HTML部份
<style type="text/css">
.renav{
width:200px;
height:150px;
line-height:21px;
overflow:hidden;
background:#FFFFFF;
}
.renav li{
height:21px;
}
</style>
<div class="renav">
<ul style="margin-top: 0px;">
<li><a>羅氏</a></li>
<li><a>瑞聲達(dá)</a></li>
<li><a>未添加1</a></li>
<li><a>未添加2</a></li>
<li><a>未添加3</a></li>
<li><a>未添加4</a></li>
<li><a>西門子</a></li>
<li><a>歐姆龍</a></li>
</ul>
</div>
復(fù)制代碼 代碼如下:
$(function(){
var $this = $(".renav");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 2000 );
}).trigger("mouseout");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height();
$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
HTML部份
復(fù)制代碼 代碼如下:
<style type="text/css">
.renav{
width:200px;
height:150px;
line-height:21px;
overflow:hidden;
background:#FFFFFF;
}
.renav li{
height:21px;
}
</style>
<div class="renav">
<ul style="margin-top: 0px;">
<li><a>羅氏</a></li>
<li><a>瑞聲達(dá)</a></li>
<li><a>未添加1</a></li>
<li><a>未添加2</a></li>
<li><a>未添加3</a></li>
<li><a>未添加4</a></li>
<li><a>西門子</a></li>
<li><a>歐姆龍</a></li>
</ul>
</div>
相關(guān)文章
基于jQuery的投票系統(tǒng)顯示結(jié)果插件
投票系統(tǒng)是網(wǎng)站中十分常見的系統(tǒng)，顯示結(jié)果也是十分常見的。最近因為項目需要開發(fā)了一個投票結(jié)果顯示jQuery插件。2011-08-08
jquery.mousewheel實現(xiàn)整屏翻屏效果
jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。 mousewheel事件的處理函數(shù)有一點小小的變化，它除了第一個參數(shù)event 外，還接收到第二個參數(shù)delta。通過參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。2015-08-08
JQuery調(diào)webservice實現(xiàn)郵箱驗證(檢測是否可用)
JQuery調(diào)webservice實現(xiàn)郵箱驗證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入，感興趣的朋友可以參下哈，希望對你有所幫助2013-05-05
這篇文章主要介紹了JQuery的加載和選擇器用法,結(jié)合簡單實例形式分析了jQuery的功能、加載、選擇器的相關(guān)使用技巧,需要的朋友可以參考下2019-05-05
本文給大家介紹的是一款使用jQuery實現(xiàn)的簡易選項卡的代碼，通過控制css熟悉來實現(xiàn)tab切換，思路清晰，這里推薦給大家。2015-03-03
這篇文章主要介紹了jQuery中addClass()方法用法,實例分析了addClass()方法的功能、定義及向匹配元素添加一個或多個類的使用技巧,需要的朋友可以參考下2015-01-01
jQuery的數(shù)據(jù)框架沒有將元素數(shù)據(jù)當(dāng)作元素屬性來存儲，我記得是可以通過jQuery的data("xxx")方法取HTML標(biāo)簽上的data-xxx屬性的值的2013-08-08
這篇文章主要分為以下知識：什么是Callbacks、Callbacks模型、基本模塊實現(xiàn)、once和auto(memory)、源碼和源碼下載，十分的細(xì)致全面，這里推薦給大家，有需要的小伙伴參考下吧。2015-03-03
在ASP.net中母版頁加載js文件，頁面中調(diào)用時出錯、tablesorter加載失敗等等,需要的朋友可以參考下2014-02-02
jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
這篇文章主要介紹了jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法,結(jié)合實例形式對比分析了jsonp跨域獲取數(shù)據(jù)的3種常用操作技巧,需要的朋友可以參考下2017-05-05