消息提示框淡入淡出效果js类

为了使用户明白每一步操作的结果，并抛弃传统的页面固定位置给出消息提示，提高用户体验，特此参考网上一些消息框淡入淡出效果的做法，完成适合自己的消息提示框淡入淡出效果类。效果如下图所示：

                                           

图1 淡入                                                                                                  图2  停留                                                                      图3 淡出                                

/******************************************************************************************************************************************************/

/**
 *  MsgPrompt()消息提示框淡入淡出特效类
 * */
/* 构造函数 */
function MsgPrompt(id,iTop,iLeft,izIndex,iWidth,iHeight,iOpacityStep,iTimeStep,oMessage,iTimeOut,iType){
    this.isIE = (document.all)? true : false;   //判断浏览器是否是IE 
    this.id = id;   //消息提示框div的id
    this.top = iTop;    //div左上角y
    this.left = iLeft;  //div左上角x
    this.zIndex = izIndex; //div层数
    this.width = iWidth;    //消息框宽
    this.height = iHeight;  //消息框高
    this.timeStep = iTimeStep;  //循环的时间间隔
    this.opacityStep = (this.isIE ? iOpacityStep : iOpacityStep/100);   //每次透明度改变的大小
    this.curOpacity = 0;    //当前透明度
    this.timeOut = iTimeOut;    //消息显示的时间
    this.message = oMessage;    //消息内容
    this.msgType = iType;   //消息类型：0表示无效，1表示pass，2表示错误，3表示警告
}
/* 定义类属性（方法，变量）*/
MsgPrompt.prototype = {
    /* 隐藏消息框 */
    hide: function(){
        var self = this; //类里使用setTimeout()避免对象混淆
        if(this.isIE){
            this.obj.filters.alpha.opacity -= this.opacityStep;
            if (this.obj.filters.alpha.opacity > 0){
                setTimeout(function(){self.hide();},this.timeStep);
            }else{
                this.obj.style.display='none';
                document.body.removeChild(this.obj);//提示结束，删除提示div
            }
        }else{
            this.curOpacity -= this.opacityStep;
            if (this.curOpacity>0){
                this.obj.style.opacity = this.curOpacity;
                setTimeout(function(){self.hide();},this.timeStep);
            }else{
                //this.obj.style.display='none';
                document.body.removeChild(this.obj);//提示结束，删除提示div
            }
        }
        return ;
    },
    createMsgDiv:function(){
        var oDiv = document.createElement('div');
        var oImg = document.createElement('img');
        var oSpan = document.createElement('span');
        var oP = document.createElement('p');
        oDiv.setAttribute('id',this.id);
        this.obj = oDiv;
        switch(parseInt(this.msgType)){
            case 0:
                oImg.src = 'images/icons/delete.png';
                oDiv.style.border = '1px red solid';
                oP.style.color = 'red';
                break;
            case 1:
                oImg.src = 'images/icons/accept.png';
                oP.style.color = 'green';
                break;
            case 2:
                oImg.src = 'images/icons/block.png';
                oP.style.color = 'red';
                break;
            case 3:
                oImg.src = 'images/icons/warning.png';
                oP.style.color = '#F75000';
                break;
        }
        with(this.obj.style){//批量设置div样式
            width = this.width; height = this.height;top = this.top;left = this.left;
            zIndex = this.zIndex; position = 'fixed';textAlign = 'center';padding =10 + 'px';
            display = 'none';border = '1px green solid';
            /* 设置渐变背景色特效 */
            background = '-webkit-gradient(linear,0 0, 0 100% ,from(#A6FFA6),to(#FFFFFF))'; /*Safari 4-5,Chrome 1-9*/
            filter = 'progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#A6FFA6,endColorStr=#FFFFFF)'; /*IE 6 7 8*/
            background = '-ms-linear-gradient(top, #A6FFA6, #FFFFFF)';/*IE 10*/    
            background = '-moz-linear-gradient(top,#A6FFA6,#FFFFFF)';/* Firefox 3.6+ */
            background = '-o-linear-gradient(top, #A6FFA6,#FFFFFF)';/*Opera 11.10+*/  
        }
        with(oImg.style){
            width = 32+'px';position = 'relative';
        }
        with(oSpan.style){
            top = '25%';bottom = '25%';position = 'relative';
        }
        if(this.isIE){//css的特殊js语法
            oImg.style.styleFloat = 'left';
            oSpan.style.styleFloat = 'left';
        }else{
            oImg.style.cssFloat = 'left';
            oSpan.style.cssFloat = 'left';
        }
        oP.innerHTML = this.message;
        document.body.appendChild(this.obj);
        this.obj.appendChild(oImg);
        this.obj.appendChild(oSpan);
        oSpan.appendChild(oP);
    },
    show: function(){
        //alert(bres'进入show函数`'+this.isIE);
        this.createMsgDiv();
        if(this.isIE){
            this.obj.cssText = 'diplay:none; z-index:100; filter:alpha(opacity=0);position:absolut;';   //为IE初始化div样式
            this.obj.filters.alpha.opacity = 0;
        }else{
            this.curOpacity = 0;
            this.obj.style.opacity = 0;
        }
        this.obj.style.display = 'block';
        /* 逐渐显示消息内容 */
        this.setMsgShow();
    },
    setMsgShow:function(){
        var self = this;
        if(this.isIE){
            this.obj.filters.alpha.opacity += this.opacityStep;
            if(this.obj.filters.alpha.opacity<100){
                setTimeOut(function(){self.setMsgShow();},this.timeStep);
            }else{
                setTimeOut(function(){self.hide();},this.timeOut);
            }
        }else{
            this.curOpacity += this.opacityStep;
            this.obj.style.opacity = this.curOpacity;
            if(this.curOpacity<1){
                setTimeout(function(){self.setMsgShow();},this.timeStep);
            }else{
                setTimeout(function(){self.hide();},this.timeOut);  
            }                                                                                                         
        }
     }
};