当前位置:编程学习 > JAVA >>

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

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 (){ //动画显示www.zzzyk.com
        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;}

 

摘自  renwumao.com(任务猫)
 
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,