利晶設計機構博客

關注研究網站設計及SEO網站優化技術!致力于為客戶提供最專業、最有效的全方面網站設計解決方案。

訂閱RSS

右下角彈窗廣告效果JS代碼

類別:網站前端開發    時間:2010-12-24

右下角彈窗廣告效果JS代碼,有應用于定時提示用戶,或投放小廣告。

<script type="text/javascript">
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();
</script>

轉載聲明:
原載:利晶科技博客 - 關注研究最新網站設計技術及SEO網站優化!
本文鏈接:http://www.xingyiguoji.com/blog/ad-right-js.html
如需轉載必須以鏈接形式注明原載或原文地址,謝謝合作!

網站前端開發其他文章

文章分類

服務項目

友情鏈接

Copyright © 2006-2012 利晶設計機構 版權所有
自慰流水喷白浆免费看