顶部下拉动画广告
基于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");