IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

弹窗广告开发

WEB前端开发 2010-11-13 09:07:19 累计浏览 2,829 次
本机暂存
标签 CSS JavaScript 浏览器兼容性

昨天弄了一个非常简陋的右下角弹窗广告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. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 （累计阅读 48,350）
  2. 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
  3. 深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,407）
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情？ （累计阅读 15,934）
  5. 图片动态局部毛玻璃模糊效果的实现 （累计阅读 14,849）
  6. 天朝第二代身份证号码的验证机制 （累计阅读 14,764）
  7. HTML 5 的data-* 自定义属性 （累计阅读 14,349）
  8. 分享一个JQUERY颜色选择插件 （累计阅读 14,225）
  9. 什么是全栈工程师？ （累计阅读 14,040）
  10. 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）