js 中心のフローティング ad_advertising コード

程序源码

复制代码 代码如下:

var floatAd = {};
floatAd.getScrollTop = function(node) {
var doc = ノード ?ノード.ownerDocument : ドキュメント;
戻り doc.documentElement.scrollTop || doc.body.scrollTop;
};
floatAd.getScrollLeft = function(node) {
var doc = ノード ?ノード.ownerDocument : ドキュメント;
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
};
floatAd.getBrowser = function() {
var d = document.documentElement;
return {
width: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth、
高さ: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight
}
};
floatAd.extend = function(destination, source) {
for(source の var プロパティ) {
destination[property] = source[property];
}
戻り先;
};
/* 默认プロパティ扩展 */
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() { // フェードイン完了後の回调関数
_this.timer = window.setInterval(function() { _this.scroll() }, _this.lay); // 滚アニメーション定位
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 = 'ブロック'; // *要提前显示.不然無法取得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.getScrollTop() _this.getBrowser().height - (--_top) 'px'
}
}; );
this.control.style.top = (parseInt(this.control.style.top, 10) 100) 'px';
};
var newAd = '開始';
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.documentElement ではなく document.body です

复制發代码如下:

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