昨天弄了一个非常简陋的右下角弹窗广告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]
学习学习,研究研究这段代码先
支持码头
浮动窗口容易被360SE给消掉.基本上是设置visibility属性为hidden
从前还好做特殊处理,现在QQ逼360把UA匿了,
匿之前360浏览器在淘宝访问者中使用超过20%.so..麻烦…
要通用可能还要加个iframe垫片.不然IE下遇到select也麻烦 🙂
效果不好看,很生硬
很不错哦。先研究下……有些难度啊……
很讨厌这个效果。不过功能到是不错。
很不错哦。先研究下……有些难度啊……
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();
ie6就用
if($.browser.msie && $.browser.version == 6.0 ){
$(window).scroll(function(){
$(“#msg”).css(“top”, $(window).scrollTop() + $(window).height() – $(“#msg”).height());
})
}
其他就 fixed好了啊??