js 居中漂浮广告

程序源码

var floatad = {};
floatad.getscrolltop = function(node) {
var doc = node ? node.ownerdocument : document;
return doc.documentelement.scrolltop || doc.body.scrolltop;
};
floatad.getscrollleft = function(node) {
var doc = node ? node.ownerdocument : document;
return doc.documentelement.scrollleft || doc.body.scrollleft;
};
floatad.getbrowser = function() {
var d = document.documentelement;
return {
width: window.innerwidth || (d && d.clientwidth) || document.body.clientwidth,
height: window.innerheight || (d && d.clientheight) || document.body.clientheight
}
};
floatad.extend = function(destination, source) {
for(var property in source) {
destination[property] = source[property];
}
return destination;
};
/* 默认属性扩展 */
floatad.setoptions = function(options) {
this.options = {
delay: 20, // 调整速率
fadetime: 1 // 自动消失时间
};
return this.extend(this.options, options || {});
};
/* 类初始化 */
floatad.init = function(id, options) {
var _this = this;
this.extend(this, this.setoptions(options));
this.control = document.getelementbyid(id);
var _callback = function() { // fadein完成后的回调函数
_this.timer = window.setinterval(function() { _this.scroll() }, _this.delay); // 滚动定位
window.settimeout(function() { _this.fadeout() }, _this.fadetime * 1000); // 在固定时间内消失
}
this.fadein(_callback);
window.onresize = function() { _this.setcenter(); }
};
/* 定时滚动 */
floatad.scroll = function() {
this.start = parseint(this.control.style.top, 10);
this.end = parseint(this.getscrolltop() + this.getbrowser().height - this.control.clientheight, 10);
if(this.start != this.end) {
this.amount = math.ceil(math.abs(this.end - this.start) / 15); /* 递减公式(this.start无限增大,整个分子无限减小,整个值就无限趋近于0) */
this.control.style.top = parseint(this.control.style.top, 10) + ((this.end < this.start) ? -this.amount : this.amount) + 'px';
}
};
/* 目标居中并处于最底部 */
floatad.setcenter = function() {
this.top = this.getscrolltop() + floatad.getbrowser().height;
this.left = (this.getscrollleft() + floatad.getbrowser().width - this.control.clientwidth) / 2;
this.control.style.top = this.top + 'px';
this.control.style.left = this.left + 'px';
};
/* fadein */
floatad.fadein = function(callback) {
var _this = this, _top = 0;
this.control.style.display = 'block'; // *要提前显示.不然无法取得clientwidth
this.setcenter();
var _timer = window.setinterval(function() {
_this.control.style.top = _this.getscrolltop() + _this.getbrowser().height - (++_top) + 'px';
if(_top >= _this.control.clientheight) {
window.clearinterval(_timer);
callback && callback();
}
}, 2);
};
/* fadeout */
floatad.fadeout = function() {
var _this = this, _num = 0, _top = _this.control.clientheight;
window.cleartimeout(this.timer);
var _timer = window.setinterval(function() {
if(_top <= 0) {
window.clearinterval(_timer);
_this.control.style.display = 'none';
} else {
_this.control.style.top = _this.getscrolltop() + _this.getbrowser().height - (--_top) + 'px';
}
}, 2);
this.control.style.top = (parseint(this.control.style.top, 10) + 100) + 'px';
};
var newad = 'start';
document.getelementbyid('show').onclick = function() {
if(newad == 'start') {
newad = floatad.init('ad', { fadetime: 10 });
}
}

程序原理
整个广告运行具有四步动作.
1. 初始化时隐藏于页面最底部.
2. 自底向上升起.直到整个广告漂浮出来
3. 启动检测.滚动时保持广告始终处于页面中间最底部.
4. 到达自定义间隔时间.广告自动渐隐.
整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrolltop + browser.clientheight).这里提供了获取这几个值的代码.
获取scrolltop, scrollleft
注意chrome和safari即使在标准doc模式下的根文档也是document.body而不是document.documentelement

floatad.getscrolltop = function(node) {
var doc = node ? node.ownerdocument : document;
return doc.documentelement.scrolltop || doc.body.scrolltop;
};
floatad.getscrollleft = function(node) {
var doc = node ? node.ownerdocument : document;
return doc.documentelement.scrollleft || doc.body.scrollleft;
};

获取可视窗口的宽高

floatad.getbrowser = function() {
var d = document.documentelement;
return {
width: window.innerwidth || (d && d.clientwidth) || document.body.clientwidth,
height: window.innerheight || (d && d.clientheight) || document.body.clientheight
}
};

代码思路流程
初始化(init) -----> 设置居中并隐藏底部(setcenter) -----> 渐显(fadein) -----> 渐显完毕.调用回调函数_callback ----->
开始倒计时渐隐时间(settimeout(fadeout, time)), 并绑定实时检测函数(scroll) -----> 到达自定义时间隐藏广告(fadeout)
使用说明
实例化函数.传入广告容器id.设置默认属性.
默认属性有:

delay: 20, // 调整速率
fadetime: 1 // 自动消失时间(s)
var newad = 'start';
document.getelementbyid('show').onclick = function() {
if(newad == 'start') {
newad = floatad.init('ad', { fadetime: 10 });
}
}

这里为了演示方便.所以当点击按钮时候才初始化广告.也可以在window.onload的时候就载入广告.
演示下载地址