顶部下拉动画广告

基于prototype和scriptaculous的顶部下拉动画广告

需要引入的js：

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/scriptaculous.js?load=effects"></script>

 下面是代码:

/*
	顶部下拉动画广告 by：dum 2012-03-07 renwumao.com
	element_id：广告前的元素节点  imgB_str\imgS_str:广告图片
*/
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.0, //动画速度
			delay: 3.1 //停留时间
		}, arguments[3] || { });
		var scale_str = "<div id=\"ad_index_Scale\" class=\"ad_index_Scale\">"
						+"<a href="+ this.options.imgTargetURL +"><img id=\"ad_index_Scale_img\" src=" + imgB_str + " /></a>"
						+"</div>"
		var blindDown_str = "<div id=\"ad_index_BlindDown\" class=\"ad_index_BlindDown\" style=\"display:none;\">"
						+"<a href="+ this.options.imgTargetURL +"><img src=" + imgS_str + " /></a>"
						+"</div>"
		new Insertion.After(this.elementObj,scale_str);
		new Insertion.After($('ad_index_Scale'),blindDown_str);
		new Effect.Scale( 'ad_index_Scale', 0,{ 
			scaleX: false, 
			scaleY: true,
			duration:this.options.duration,
			delay: this.options.delay,
			afterFinishInternal: function(effect) {
				new Effect.BlindDown( 'ad_index_BlindDown', 20,{
					scaleX: false, 
					scaleY: true
				});
			}	
		});	
	}
};

new AdTopDown("page","test/banner_b.jpg","test/banner_s.jpg");

 

转载于:https://www.cnblogs.com/renwumao/archive/2012/03/08/2385452.html