IT技术博客大学习 共学习 共进步
首页 / JavaScript

弹窗广告开发

WEB前端开发 2010-11-13 09:07:19 浏览 2,721 次
标签 onscroll 广告 弹窗

昨天弄了一个非常简陋的右下角弹窗广告demo：http://www.css88.com/demo/rightDown-ad/

因为工作和其他原因该代码没有最终完善，等以后项目上了可能会重新开发，本代码也并非本人原创，朋友给的一段代码，我在他的基础上改的，主要改进点：

  • 在支持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();

建议继续学习

  1. 彻底屏蔽优酷广告 （阅读 12,723）
  2. 简单好用的土办法抗击洋鬼子对wordpress系统的广告灌入 （阅读 4,086）
  3. 广告与消费心理分析 （阅读 4,041）
  4. 广告心理学中的创意简析 （阅读 3,941）
  5. QQ农场小帮手最简单去广告的方法 （阅读 3,622）
  6. 互联网广告的发展史 （阅读 3,602）
  7. 姐要的视频广告 （阅读 3,563）
  8. 说说弹窗和新窗口打开拦截 （阅读 3,362）
  9. msn2011完美去广告方案 （阅读 3,262）
  10. 网站广告投放策略研究 (一) 轮播以及效用最大化 （阅读 3,245）