js右下角弹窗代码(支持IE和Firefox)

发布时间:2020-04-17编辑:脚本学堂
分享一个js右下角弹窗代码,用js脚本实现右下角弹出广告代码,需要的朋友参考下。

右下角弹出广告代码的例子:(右下角提示框
    * 在支持position:fixed的浏览器上使用position:fixed,这样当拖动共同条的时候弹窗位置是固定的。
    * 优化了IE6下onscroll 事件绑定的函数

需要改进的地方:
    * 30秒后自动关闭
    * 方便的插入弹出内容

主要代码:
 

复制代码 代码示例:
var RBMessage={  
    boxW:200,  
    boxH:101,  
    init:function(){  
        var that = this;  
        this.createBox();  
        document.getElementById("msg_close").onclick = function() {  
            that.BoxWin.style.display="none";  
        }  
    },  
    bind: function() { //绑定窗口滚动条与大小变化事件  
        var that = this,  
        st, rt;  
        window.onscroll = function() {  
            if( !!window.ActiveXObject && !window.XMLHttpRequest ){  
                clearTimeout(st);  
                clearTimeout(that.timer2);  
                that.setOpacity(0);  
                st = setTimeout(function() {  
                    that.BoxWin.style.top = that.getY().top;  
                    that.show();  
                },500);  
            }  
        };  
        window.onresize = function(){  
            if (!!window.ActiveXObject && !window.XMLHttpRequest) {  
                clearTimeout(rt);  
                rt = setTimeout(function(){  
                    that.BoxWin.style.top = that.getY().top  
                }, 100);  
            }  
        }  
    },  
    show: function() { //渐显  
        clearInterval(this.timer2);  
        var that = this,  
        fx = this.fx(0, 100, 0.1),  
        t = 0;  
        this.timer2 = setInterval(function() {  
            t = fx();  
            that.setOpacity(t[0]);  
            if (t[1] == 0) {  
                clearInterval(that.timer2)  
            }  
        },  
        10);  
    },  
    fx: function(a, b, c) { //缓冲计算  
        var cMath = Math[(a - b) > 0 ? "floor": "ceil"],  
        c = c || 0.1;  
        return function() {  
            return [a += cMath((b - a) * c), a - b]  
        }  
    },  
    setOpacity: function(x) { //设置透明度  
        var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';  
        this.BoxWin.style.visibility = x < = 0 ? 'hidden': 'visible'; //IE有绝对或相对定位内容不随父透明度变化的bug  
        this.BoxWin.style.filter = v;  
        this.BoxWin.style.opacity = x / 100;  
    },  
    getY: function() { //计算移动坐标  
        var d = document,  
        b = document.body,  
        e = document.documentElement;  
        var s = Math.max(b.scrollTop, e.scrollTop);  
        var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight: e.clientHeight;  
        var h2 = this.BoxWin.offsetHeight;  
        return {  
            foot: s + h + h2 + 2 + 'px',  
            top: s + h - h2 - 2 + 'px' 
        }  
    },  
    moveTo: function(y) { //移动动画  
        clearInterval(this.timer);  
        var that = this;  
        var moveTopNum=-that.boxH;  
        this.timer = setInterval(function() {  
            moveTopNum+=5;  
            that.BoxWin.style.bottom =  moveTopNum +'px';  
            if (moveTopNum >= 0) {  
                clearInterval(that.timer);  
                that.bind();  
            }  
        },50);  
        return this;  
    },  
    createBox:function(){  
        this.BoxWin=document.createElement('div');  
        this.BoxWin.style.width = this.boxW+"px";  
        this.BoxWin.style.height =  this.boxH+"px";  
        this.BoxWin.style.bottom = - this.boxH+"px";  
        this.BoxWin.id = "msg_win";  
        this.BoxWin.innerHTML = '<div class="icos"><a href="javascript:void 0" title="关闭" id="msg_close">X</a></div><div id="msg_title">温馨提示(标题)</div><div id="msg_content"></div>';  
        document.body.appendChild(this.BoxWin);  
        var that = this;  
        setTimeout(function() { //初始化最先位置  
            that.BoxWin.style.display = 'block';  
            that.moveTo();  
        },1000);  
        return this;  
    }  
};  
RBMessage.init();