顶部下拉收缩广告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