js 居中漂浮廣告
更新時間:2010年03月21日 11:35:19 作者:
整個實現(xiàn)最重要的就是控制廣告距離文檔(非窗口)最頂部的距離.(scrollTop + browser.clientHeight).這里提供了獲取這幾個值的代碼.
程序源碼
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, // 調(diào)整速率
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完成后的回調(diào)函數(shù)
_this.timer = window.setInterval(function() { _this.scroll() }, _this.delay); // 滾動定位
window.setTimeout(function() { _this.fadeOut() }, _this.fadeTime * 1000); // 在固定時間內(nèi)消失
}
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';
}
};
/* 目標(biāo)居中并處于最底部 */
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. 到達自定義間隔時間.廣告自動漸隱.
整個實現(xiàn)最重要的就是控制廣告距離文檔(非窗口)最頂部的距離.(scrollTop + browser.clientHeight).這里提供了獲取這幾個值的代碼.
獲取scrollTop, scrollLeft
注意Chrome和Safari即使在標(biāo)準(zhǔn)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) -----> 設(shè)置居中并隱藏底部(setCenter) -----> 漸顯(fadeIn) -----> 漸顯完畢.調(diào)用回調(diào)函數(shù)_callback ----->
開始倒計時漸隱時間(setTimeout(fadeOut, time)), 并綁定實時檢測函數(shù)(scroll) -----> 到達自定義時間隱藏廣告(fadeOut)
使用說明
實例化函數(shù).傳入廣告容器ID.設(shè)置默認屬性.
默認屬性有:
delay: 20, // 調(diào)整速率
fadeTime: 1 // 自動消失時間(s)
var newAd = 'start';
document.getElementById('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 });
}
}
這里為了演示方便.所以當(dāng)點擊按鈕時候才初始化廣告.也可以在window.onload的時候就載入廣告.
演示下載地址 居中顯示的漂浮廣告代碼
復(fù)制代碼 代碼如下:
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, // 調(diào)整速率
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完成后的回調(diào)函數(shù)
_this.timer = window.setInterval(function() { _this.scroll() }, _this.delay); // 滾動定位
window.setTimeout(function() { _this.fadeOut() }, _this.fadeTime * 1000); // 在固定時間內(nèi)消失
}
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';
}
};
/* 目標(biāo)居中并處于最底部 */
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. 到達自定義間隔時間.廣告自動漸隱.
整個實現(xiàn)最重要的就是控制廣告距離文檔(非窗口)最頂部的距離.(scrollTop + browser.clientHeight).這里提供了獲取這幾個值的代碼.
獲取scrollTop, scrollLeft
注意Chrome和Safari即使在標(biāo)準(zhǔn)doc模式下的根文檔也是document.body而不是document.documentElement
復(fù)制代碼 代碼如下:
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;
};
獲取可視窗口的寬高
復(fù)制代碼 代碼如下:
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) -----> 設(shè)置居中并隱藏底部(setCenter) -----> 漸顯(fadeIn) -----> 漸顯完畢.調(diào)用回調(diào)函數(shù)_callback ----->
開始倒計時漸隱時間(setTimeout(fadeOut, time)), 并綁定實時檢測函數(shù)(scroll) -----> 到達自定義時間隱藏廣告(fadeOut)
使用說明
實例化函數(shù).傳入廣告容器ID.設(shè)置默認屬性.
默認屬性有:
復(fù)制代碼 代碼如下:
delay: 20, // 調(diào)整速率
fadeTime: 1 // 自動消失時間(s)
var newAd = 'start';
document.getElementById('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 });
}
}
這里為了演示方便.所以當(dāng)點擊按鈕時候才初始化廣告.也可以在window.onload的時候就載入廣告.
演示下載地址 居中顯示的漂浮廣告代碼
相關(guān)文章
標(biāo)準(zhǔn)布局應(yīng)用:對聯(lián)與旗幟
標(biāo)準(zhǔn)布局應(yīng)用:對聯(lián)與旗幟...2006-12-12js實現(xiàn)全屏漂浮廣告移入光標(biāo)停止移動
這篇文章主要介紹了js全屏漂浮廣告移入光標(biāo)停止移動效果,大家參考使用吧2013-12-12右下角廣告腳本之家出品(點擊廣告后出現(xiàn)關(guān)閉按鈕可關(guān)閉)
只有當(dāng)用戶點擊的廣告后,才會出現(xiàn)關(guān)閉按鈕,大家也許能用的到2008-12-12