jquery 上下滾動廣告
更新時間:2009年06月17日 22:32:37 作者:
jquery 上下滾動廣告實現(xiàn)代碼,大家可以自行測試,需要加載jquery類庫
復(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動畫效果
本次學(xué)習(xí)分為兩個文件的測試,第一個是基本動畫,第二個是滑動和透明動畫效果,分別如下2013-09-09jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會報錯.2013-04-04jQuery插件開發(fā)精品教程(讓你的jQuery更上一個臺階)
這篇jQuery插件開發(fā)教程是小編見過的最詳細的了,每個解說都很好,對于想做增強插件的朋友確實不錯的參考資料,特分享下,方便需要的朋友2015-11-11Easyui 關(guān)閉jquery-easui tab標簽頁前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關(guān)閉jquery-easui tab標簽頁前觸發(fā)事件 ,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04