js centered floating ad_advertising code

程序源码

复制代码 代码如下:

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;
};

Get the width and height of the visual window

Copy the code The code is as follows:

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
}
};

Code idea flow
Initialization (init) -----> Set center and hide the bottom (setCenter) -----> FadeIn (fadeIn) -----> FadeIn is completed. Call the callback function _callback ---- ->
Start the countdown to fade time (setTimeout(fadeOut, time)), and bind the real-time detection function (scroll) -----> Hide ads when the custom time is reached (fadeOut)
Instructions for use
Instantiate the function. Pass in the ad container ID. Set the default attributes.
The default attributes are:

Copy code The code is as follows:

delay: 20, // Adjustment rate
fadeTime: 1 // Automatic disappearance time (s)
var newAd = 'start';
document.getElementById ('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 });
}
}

This is for convenience of demonstration. So the advertisement is initialized when the button is clicked. The advertisement can also be loaded during window.onload.
Demo download address is displayed in the center floating ad code