AdTopDown(element_id,imgB_str,imgS_str,{[imgTargetURL],[duration],[delay],[backFn],[isAnimation]})
參數說明:
element_id：廣告前的元素節點
imgB_str：廣告大圖片
imgS_str: 廣告小圖片
可選參數：
imgTargetURL: 鏈接地址
duration: 動畫速度
delay: 停留時間
backFn: 動畫完成後回調方法 （v1.2 新增）
isAnimation: 是否動畫播放(true/false)
用法：
new AdTopDown('page',"images/ad/quming_banner_b.jpg","images/ad/quming_banner_s.jpg")
也可以這樣用，下面的動畫效果用法：
new AdTopDown('page',"images/ad/quming_banner_b.jpg","images/ad/quming_banner_s.jpg",{
imgTargetURL:"/quming_index.jspx?topad",
backFn:function(obj){
alert('動畫播放完成瞭，我就出來');
}
});
下面的靜態效果用法：
new AdTopDown('page',"images/ad/quming_banner_b.jpg","images/ad/quming_banner_s.jpg",{isAnimation: false});
代碼如下：
/*
* 頂部下拉動畫廣告 v 1.2 by：dum 2012-03-16
* element_id：廣告前的元素節點 imgB_str\imgS_str:廣告圖片
* 增加回調方法backFn
*/
var AdTopDown = Class.create();
AdTopDown.prototype = {
initialize:function (element_id,imgB_str,imgS_str){//構造函數
this.elementObj = $(element_id);
this.imgB_str = imgB_str;
this.options = Object.extend({
imgTargetURL:"#", //鏈接地址
duration: 1.2, //動畫速度
delay: 1.0, //停留時間
backFn: function(obj){}, //動畫完成後回調方法
isAnimation: true //是否動畫播放
}, arguments[3] || { });
this.scale_str = "<p id=\"ad_index_Scale\" class=\"ad_index_Scale\">"
+"<a href="+ this.options.imgTargetURL +" target=\"_blank\"><img id=\"ad_index_Scale_img\" src=" + imgB_str + " /></a>"
+"</p>"
this.blindDown_str = "<p id=\"ad_index_BlindDown\" class=\"ad_index_BlindDown\" style=\"display:none;\">"
+"<a href="+ this.options.imgTargetURL +" target=\"_blank\"><img src=" + imgS_str + " /></a>"
+"</p>"
if(this.options.isAnimation){
this.animation();
}else{
this.statics();
}
},
animation:function (){ //動畫顯示www.aiwalls.com
new Insertion.After(this.elementObj,this.scale_str);
new Insertion.After($('ad_index_Scale'),this.blindDown_str);
this.animation_Scale();
},
animation_Scale:function(){
new Effect.Scale( 'ad_index_Scale', 0,{
scaleX: false,
scaleY: true,
duration:this.options.duration,
delay: this.options.delay,
afterFinishInternal: this.animation_BlindDown.bind(this)
});
},
animation_BlindDown:function(obj){
new Effect.BlindDown( 'ad_index_BlindDown',{
scaleX: false,
scaleY: true,
afterFinishInternal: this.options.backFn.bind(this)
});
},
statics:function (){ //靜態顯示
new Insertion.After(this.elementObj,this.blindDown_str);
$('ad_index_BlindDown').setStyle({ marginTop: '10px'});
$('ad_index_BlindDown').show();
}
};
所用css
.ad_index_Scale,.ad_index_BlindDown{width:980px; margin:0 auto;clear:both;overflow:hidden;}
.ad_index_Scale{ margin-top:10px;}
摘自 renwumao.com(任務貓)
