程序原理
整個(gè)廣告運(yùn)行具有四步動(dòng)作.
1. 初始化時(shí)隱藏于頁(yè)面最底部.
2. 自底向上升起.直到整個(gè)廣告漂浮出來(lái)
3. 啟動(dòng)檢測(cè).滾動(dòng)時(shí)保持廣告始終處于頁(yè)面中間最底部.
4. 到達(dá)自定義間隔時(shí)間.廣告自動(dòng)漸隱.
整個(gè)實(shí)現(xiàn)最重要的就是控制廣告距離文檔(非窗口)最頂部的距離.(scrollTop + browser.clientHeight).這里提供了獲取這幾個(gè)值的代碼.
獲取scrollTop, scrollLeft
注意Chrome和Safari即使在標(biāo)準(zhǔn)doc模式下的根文檔也是document.body而不是document.documentElement
[code]
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;
};
[/code]
獲取可視窗口的寬高
[code]
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]
代碼思路流程
初始化(init) -----> 設(shè)置居中并隱藏底部(setCenter) -----> 漸顯(fadeIn) -----> 漸顯完畢.調(diào)用回調(diào)函數(shù)_callback ----->
開(kāi)始倒計(jì)時(shí)漸隱時(shí)間(setTimeout(fadeOut, time)), 并綁定實(shí)時(shí)檢測(cè)函數(shù)(scroll) -----> 到達(dá)自定義時(shí)間隱藏廣告(fadeOut)
使用說(shuō)明
實(shí)例化函數(shù).傳入廣告容器ID.設(shè)置默認(rèn)屬性.
默認(rèn)屬性有:
[code]
delay: 20, // 調(diào)整速率
fadeTime: 1 // 自動(dòng)消失時(shí)間(s)
var newAd = 'start';
document.getElementById('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 });
}
}
[/code]
這里為了演示方便.所以當(dāng)點(diǎn)擊按鈕時(shí)候才初始化廣告.也可以在window.onload的時(shí)候就載入廣告.