右下角弹窗广告效果

昨天弄了一个非常简陋的右下角弹窗广告demo:https://www.html.cn/demo/rightDown-ad/

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

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

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

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

主要代码:

[code=”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 = ‘

温馨提示(标题)

‘;
document.body.appendChild(this.BoxWin);
var that = this;
setTimeout(function() { //初始化最先位置
that.BoxWin.style.display = ‘block’;
that.moveTo();
},1000);
return this;
}
};
RBMessage.init();
[/code]

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 右下角弹窗广告效果

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    学习学习,研究研究这段代码先

    TimonWang8年前 (2010-11-12)回复
  2. #-48

    支持码头

    8年前 (2010-11-12)回复
  3. #-47

    浮动窗口容易被360SE给消掉.基本上是设置visibility属性为hidden
    从前还好做特殊处理,现在QQ逼360把UA匿了,
    匿之前360浏览器在淘宝访问者中使用超过20%.so..麻烦…
    要通用可能还要加个iframe垫片.不然IE下遇到select也麻烦 🙂

    lenel8年前 (2010-11-12)回复
  4. #-46

    效果不好看,很生硬

    QiQiBoY8年前 (2010-11-12)回复
  5. #-45

    很不错哦。先研究下……有些难度啊……

    阅微BLOG8年前 (2010-11-12)回复
  6. #-44

    很讨厌这个效果。不过功能到是不错。

    wmtimes8年前 (2010-11-18)回复
  7. #-43

    很不错哦。先研究下……有些难度啊……

    Latoya Bridges8年前 (2010-12-22)回复
  8. #-42

    var RBMessage={
    boxW: 200,
    boxH: 200,
    init: function(){
    var that = this;
    that.creatBox();
    $(“.closeX”).click(function(){
    $(“#msg_win”).slideUp(500);
    });
    },
    bind: function(){
    var that = this;
    if( !!window.ActiveXObject && !window.XMLHttpRequest ){
    $(window).bind(“resize scroll” ,function(){
    $(“#msg_win”).fadeIn(“fast”,function(){$(this).show()}).delay(100);
    $(“#msg_win”).hide();
    });
    }
    return this;
    },

    creatBox: function(){
    var that = this;
    $(“body”).append(“X(Close) hello”);
    $(“#msg_win”).delay(500).css({“width”: that.boxW}).animate({
    “height”:that.boxH,
    opacity: ‘toggle’
    },
    { duration : 1000,
    complete : function(){
    $(this).fadeTo(0);
    }
    });
    this.bind();
    }

    };
    RBMessage.init();

  9. #-41

    ie6就用
    if($.browser.msie && $.browser.version == 6.0 ){
    $(window).scroll(function(){
    $(“#msg”).css(“top”, $(window).scrollTop() + $(window).height() – $(“#msg”).height());
    })
    }

    其他就 fixed好了啊??

    小说啊8年前 (2011-05-11)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏