jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
更新時(shí)間：2013年03月29日 16:34:24 作者：
向上滾動(dòng)的效果想必大家都見過吧!無縫間歇向上滾動(dòng)應(yīng)該也不會(huì)陌生吧，接下來為大家介紹下jquery實(shí)現(xiàn)無縫間歇滾動(dòng)，感興趣的朋友可以參考下哈，希望可以幫助到你們
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é)果也是十分常見的。最近因?yàn)轫?xiàng)目需要開發(fā)了一個(gè)投票結(jié)果顯示jQuery插件。2011-08-08
jquery.mousewheel實(shí)現(xiàn)整屏翻屏效果
jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。 mousewheel事件的處理函數(shù)有一點(diǎn)小小的變化，它除了第一個(gè)參數(shù)event 外，還接收到第二個(gè)參數(shù)delta。通過參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。2015-08-08
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證(檢測(cè)是否可用)
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請(qǐng)重新輸入，感興趣的朋友可以參下哈，希望對(duì)你有所幫助2013-05-05
這篇文章主要介紹了JQuery的加載和選擇器用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery的功能、加載、選擇器的相關(guān)使用技巧,需要的朋友可以參考下2019-05-05
jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡(jiǎn)易選項(xiàng)卡的代碼，通過控制css熟悉來實(shí)現(xiàn)tab切換，思路清晰，這里推薦給大家。2015-03-03
這篇文章主要介紹了jQuery中addClass()方法用法,實(shí)例分析了addClass()方法的功能、定義及向匹配元素添加一個(gè)或多個(gè)類的使用技巧,需要的朋友可以參考下2015-01-01
jQuery的數(shù)據(jù)框架沒有將元素?cái)?shù)據(jù)當(dāng)作元素屬性來存儲(chǔ)，我記得是可以通過jQuery的data("xxx")方法取HTML標(biāo)簽上的data-xxx屬性的值的2013-08-08
這篇文章主要分為以下知識(shí)：什么是Callbacks、Callbacks模型、基本模塊實(shí)現(xiàn)、once和auto(memory)、源碼和源碼下載，十分的細(xì)致全面，這里推薦給大家，有需要的小伙伴參考下吧。2015-03-03
在ASP.net中母版頁(yè)加載js文件，頁(yè)面中調(diào)用時(shí)出錯(cuò)、tablesorter加載失敗等等,需要的朋友可以參考下2014-02-02
jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
這篇文章主要介紹了jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法,結(jié)合實(shí)例形式對(duì)比分析了jsonp跨域獲取數(shù)據(jù)的3種常用操作技巧,需要的朋友可以參考下2017-05-05