顶部下拉收缩广告v1.2(新增回调方法)

本效果基于prototype.js 和 scriptaculous.js

效果预览(顶部的广告)：www.renwumao.com

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 = "<div 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>"
						+"</div>"
		this.blindDown_str = "<div id=\"ad_index_BlindDown\" class=\"ad_index_BlindDown\" style=\"display:none;\">"
						+"<a href="+ this.options.imgTargetURL +" target=\"_blank\"><img src=" + imgS_str + " /></a>"
						+"</div>"
		
		if(this.options.isAnimation){
			this.animation();
		}else{
			this.statics();
		}
	},
	animation:function (){ //动画显示
		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;}

老版本在这里：http://www.cnblogs.com/renwumao/articles/2385452.html