排列三字谜

支持IE和Firefox的右下角彈窗js代碼

2010-12-06 12:09:08來源:作者:

因為工作和其他原因該代碼沒有最終完善,等以后項目上了可能會重新開發,本代碼也并非本人原創,朋友給的一段代碼,我在他的基礎上改的,主要改進點:

因為工作和其他原因該代碼沒有最終完善,等以后項目上了可能會重新開發,本代碼也并非本人原創,朋友給的一段代碼,我在他的基礎上改的,主要改進點:

    * 在支持position:fixed的瀏覽器上使用position:fixed,這樣當拖動共同條的時候彈窗位置是固定的。
    * 優化了IE6下onscroll 事件綁定的函數

還需改進的地方(過段事件等項目應用的時候會修改):

    * 30秒后自動關閉
    * 方便的插入彈出內容

主要代碼:

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

 

關鍵詞:javascript

贊助商鏈接:

排列三字谜 竟彩 新番号库 排列三专家预测最准确 股票配资平台都找天牛宝股票配资可信 心悦辽宁麻将 竟彩 手机麻将透视软件2019 pk10精准一期计 日本av伦理三级 黑暗故事 天海翼女教师番号 红中麻将代理个人中心 泰仓配资 cba比分广 20选5福彩走势图 黄色片下栽