jquery 上下滾動(dòng)廣告
更新時(shí)間:2009年06月17日 22:32:37 作者:
jquery 上下滾動(dòng)廣告實(shí)現(xiàn)代碼,大家可以自行測(cè)試,需要加載jquery類庫(kù)
復(fù)制代碼 代碼如下:
(function($){
$.fn.extend({
rollList:function(option){
option=$.extend({
direction:"up",
step:1,
time:23
},option);
var step_coe,scroll_coe,score_coe;
if(option.direction=="up")
{
step_coe=1;
scroll_coe=1;
score_coe=1;
}else
{
step_coe=-1;
scroll_coe=-1;
score_coe=0;
}
return this.each(function(){
var $this=$(this);
var _this=this;
var itemHeight;
var temp=$("<DIV> </DIV>");
$this.css("overflow","hidden").children()
.appendTo(temp);
$this.append(temp.clone(true)).append(temp);
itemHeight=$this.children();
itemHeight=itemHeight.eq(1).offset().top-itemHeight.eq(0).offset().top;
while($this.children(":last").offset().top-$this.offset().top<=$this.height())
$this.append(temp.clone(true));
var roll;
this.scrollTop=itemHeight*(1-score_coe);
roll=function (){
temp=setInterval(function(){
if(_this.scrollTop*scroll_coe>=itemHeight*score_coe)
{
_this.scrollTop=(_this.scrollTop-itemHeight)*scroll_coe;
}
_this.scrollTop+=option.step*step_coe;
},option.time);
}
$this.hover(function(){
clearInterval(temp);
},function(){
roll();
});
roll();
});
}
})
}(jQuery));
調(diào)用如下:
復(fù)制代碼 代碼如下:
$(elem).rollList();
您可能感興趣的文章:
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
本次學(xué)習(xí)分為兩個(gè)文件的測(cè)試,第一個(gè)是基本動(dòng)畫,第二個(gè)是滑動(dòng)和透明動(dòng)畫效果,分別如下2013-09-09jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會(huì)報(bào)錯(cuò).2013-04-04jQuery插件實(shí)現(xiàn)屏蔽單個(gè)元素使用戶無法點(diǎn)擊
屏蔽單個(gè)元素使用戶無法點(diǎn)擊在某些特殊的情況下還是蠻有用的,例如及不舉了,感興趣的朋友可以參考下,希望可以幫助到你2013-04-04jquery實(shí)現(xiàn)圖片上傳之前預(yù)覽的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片上傳之前預(yù)覽的方法,涉及jquery針對(duì)圖片及頁(yè)面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jQuery插件開發(fā)精品教程(讓你的jQuery更上一個(gè)臺(tái)階)
這篇jQuery插件開發(fā)教程是小編見過的最詳細(xì)的了,每個(gè)解說都很好,對(duì)于想做增強(qiáng)插件的朋友確實(shí)不錯(cuò)的參考資料,特分享下,方便需要的朋友2015-11-11用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)
這篇文章主要介紹了用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)的效果,需要的朋友可以參考下2014-04-04Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁(yè)前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁(yè)前觸發(fā)事件 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04