告白工夫初始化免费素材下载 居中显示的沉没告白代码

顺序原理
整个告白运转具备四步举措.
1. 初始化时暗藏于页面最底部.
2. 自底向回升起.直到整个告白沉没进去
3. 启动检测.滚动时放弃告白始终处于页面两头最底部.
4. 抵达自界说距离工夫.告白主动渐隐.
整个完成最首要的就是管制告白间隔文档(非窗口)最顶部的间隔.(scrollTop + browser.clientHeight).这里提供了猎取这几个值的代码.
猎取scrollTop, scrollLeft
留意Chrome以及Safari即便正在规范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) -----> 设置居中并暗藏底部(setCenter) -----> 渐显(fadeIn) -----> 渐显终了.挪用回调函数_callback ----->
开端倒计时渐隐工夫(setTimeout(fadeOut, time)), 并绑定及时检测函数(scroll) -----> 抵达自界说工夫暗藏告白(fadeOut)
应用阐明
实例化函数.传入告白容器ID.设置默许属性.
默许属性有:
[code]
delay: 20, // 调整速度
fadeTime: 1 // 主动隐没工夫(s)
var newAd = 'start';
document.getElementById('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 });
}
}
[/code]
这里为了演示不便.以是当点击按钮时分才初始化告白.也能够正在window.onload的时分就载入告白.