昨天弄了一个非常简陋的右下角弹窗广告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]