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

2010-12-06 12:09:08来源:作者:
因为工作和其他原因该代码没有最终完善,等以后项目上了可能会重新开发,本代码也并非本人原创,朋友给的一段代码,我在他的基础上改的,主要改进点:
因为工作和其他原因该代码没有最终完善,等以后项目上了可能会重新开发,本代码也并非本人原创,朋友给的一段代码,我在他的基础上改的,主要改进点:     * 在支持position:fixed的浏览器上使用position:fixed,这样当拖动共同条的时候弹窗位置是固定的。
    * 优化了IE6下onscroll 事件绑定的函数
还需改进的地方(过段事件等项目应用的时候会修改):     * 30秒后自动关闭
    * 方便的插入弹出内容
主要代码:
JavaScript Code复制内容到剪贴板
  •   
  • 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();  
  •  
    关键词:javascript

    赞助商链接:

    齐乐娱乐