基于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");