程序原理
整个广告运行具有四步动作.
1.初始化时隐藏于页面最底部.
2.自底向上升起.直到整个广告漂浮出来
3.启动检测.滚动时保持广告始终处于页面中间最底部.
4.到达自定义间隔时间.广告自动渐隐.
整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrollTop+browser.clientHeight).这里提供了获取这几个值的代码.
获取scrollTop,scrollLeft
注意Chrome和Safari即使在标准doc模式下的根文档也是document.body而不是document.documentElement
[code]
floatAd.getScrollTop=function(node){
vardoc=node?node.ownerDocument:document;
returndoc.documentElement.scrollTop||doc.body.scrollTop;
};
floatAd.getScrollLeft=function(node){
vardoc=node?node.ownerDocument:document;
returndoc.documentElement.scrollLeft||doc.body.scrollLeft;
};
[/code]
获取可视窗口的宽高
[code]
floatAd.getBrowser=function(){
vard=document.documentElement;
return{
width:window.innerWidth||(d&&d.clientWidth)||document.body.clientWidth,
height:window.innerHeight||(d&&d.clientHeight)||document.body.clientHeight
}
};
[/code]
代码思路流程
初始化(init)----->设置居中并隐藏底部(setCenter)----->渐显(fadeIn)----->渐显完毕.调用回调函数_callback----->
开始倒计时渐隐时间(setTimeout(fadeOut,time)),并绑定实时检测函数(scroll)----->到达自定义时间隐藏广告(fadeOut)
使用说明
实例化函数.传入广告容器ID.设置默认属性.
默认属性有:
[code]
delay:20,//调整速率
fadeTime:1//自动消失时间(s)
varnewAd='start';
document.getElementById('show').onclick=function(){
if(newAd=='start'){
newAd=floatAd.init('ad',{fadeTime:10});
}
}
[/code]
这里为了演示方便.所以当点击按钮时候才初始化广告.也可以在window.onload的时候就载入广告.