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




    * 在支持position:fixed的浏览器上使用position:fixed,这样当拖动共同条的时候弹窗位置是固定的。
    * 优化了IE6下onscroll 事件绑定的函数

还需改进的地方(过段事件等项目应用的时候会修改):

    * 30秒后自动关闭
    * 方便的插入弹出内容

 

JavaScript代码
  1. var RBMessage={      
  2.     boxW:200,      
  3.     boxH:101,      
  4.     init:function(){      
  5.         var that = this;      
  6.         this.createBox();      
  7.         document.getElementById("msg_close").onclick = function() {      
  8.             that.BoxWin.style.display="none";      
  9.         }      
  10.     },      
  11.     bind: function() { //绑定窗口滚动条与大小变化事件      
  12.         var that = this,      
  13.         st, rt;      
  14.         window.onscroll = function() {      
  15.             if( !!window.ActiveXObject && !window.XMLHttpRequest ){      
  16.                 clearTimeout(st);      
  17.                 clearTimeout(that.timer2);      
  18.                 that.setOpacity(0);      
  19.                 st = setTimeout(function() {      
  20.                     that.BoxWin.style.top = that.getY().top;      
  21.                     that.show();      
  22.                 },500);      
  23.             }      
  24.         };      
  25.         window.onresize = function(){      
  26.             if (!!window.ActiveXObject && !window.XMLHttpRequest) {      
  27.                 clearTimeout(rt);      
  28.                 rt = setTimeout(function(){      
  29.                     that.BoxWin.style.top = that.getY().top      
  30.                 }, 100);      
  31.             }      
  32.         }      
  33.     },      
  34.     show: function() { //渐显      
  35.         clearInterval(this.timer2);      
  36.         var that = this,      
  37.         fx = this.fx(0, 100, 0.1),      
  38.         t = 0;      
  39.         this.timer2 = setInterval(function() {      
  40.             t = fx();      
  41.             that.setOpacity(t[0]);      
  42.             if (t[1] == 0) {      
  43.                 clearInterval(that.timer2)      
  44.             }      
  45.         },      
  46.         10);      
  47.     },      
  48.     fx: function(a, b, c) { //缓冲计算      
  49.         var cMath = Math[(a – b) > 0 ? "floor""ceil"],      
  50.         c = c || 0.1;      
  51.         return function() {      
  52.             return [a += cMath((b – a) * c), a – b]      
  53.         }      
  54.     },      
  55.     setOpacity: function(x) { //设置透明度      
  56.         var v = x >= 100 ? ‘‘‘Alpha(opacity=‘ + x + ‘)‘;      
  57.         this.BoxWin.style.visibility = x < = 0 ? ‘hidden‘‘visible‘//IE有绝对或相对定位内容不随父透明度变化的bug      
  58.         this.BoxWin.style.filter = v;      
  59.         this.BoxWin.style.opacity = x / 100;      
  60.     },      
  61.     getY: function() { //计算移动坐标      
  62.         var d = document,      
  63.         b = document.body,      
  64.         e = document.documentElement;      
  65.         var s = Math.max(b.scrollTop, e.scrollTop);      
  66.         var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight: e.clientHeight;      
  67.         var h2 = this.BoxWin.offsetHeight;      
  68.         return {      
  69.             foot: s + h + h2 + 2 + ‘px‘,      
  70.             top: s + h – h2 – 2 + ‘px‘     
  71.         }      
  72.     },      
  73.     moveTo: function(y) { //移动动画      
  74.         clearInterval(this.timer);      
  75.         var that = this;      
  76.         var moveTopNum=-that.boxH;      
  77.         this.timer = setInterval(function() {      
  78.             moveTopNum+=5;      
  79.             that.BoxWin.style.bottom =  moveTopNum +‘px‘;      
  80.             if (moveTopNum >= 0) {      
  81.                 clearInterval(that.timer);      
  82.                 that.bind();      
  83.             }      
  84.         },50);      
  85.         return this;      
  86.     },      
  87.     createBox:function(){      
  88.         this.BoxWin=document.createElement(‘div‘);      
  89.         this.BoxWin.style.width = this.boxW+"px";      
  90.         this.BoxWin.style.height =  this.boxH+"px";      
  91.         this.BoxWin.style.bottom = – this.boxH+"px";      
  92.         this.BoxWin.id = "msg_win";      
  93.         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>‘;      
  94.         document.body.appendChild(this.BoxWin);      
  95.         var that = this;      
  96.         setTimeout(function() { //初始化最先位置      
  97.             that.BoxWin.style.display = ‘block‘;      
  98.             that.moveTo();      
  99.         },1000);      
  100.         return this;      
  101.     }      
  102. };      
  103. RBMessage.init();    
发表评论?

2 条评论。

  1. 嘿嘿,你自己写的博客程序?过来玩玩http://b3log-solo.googlecode.com/这个嘛

  2. 有意思,我也在看Google App Engine。刚好可以用你的blog程序试试

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.