居中显示的漂浮广告代码

程序原理
整个广告运行具有四步动作.
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的时候就载入广告.

下载方法:
1、请扫描下面二维码关注时代Java公众号,或者微信搜索时代JavaNowJava关注。
    (如已经关注,请直接发送编号)
2、在公众号里发送编号:5329
3、发送后,请选择线路下载:通用网络下载移动网络下载电信网络下载

学习实践小窍门

理论 + 实践、动脑 + 动手进步更快,云服务器可以帮助学习和实践。

可以搭建学习平台、搭建自己的Web服务/网站/博客、搭建网盘、安装各种软件和系统……

推荐腾讯云和阿里云:

[腾讯云] 新客户无门槛 | 送2860元代金券!    十周年感恩活动,云服务器首年95元!

[阿里云] 爆款特惠,低至不到1折!    多种优惠券 | 学生特惠专享!

有个入门级云服务器完全够用了,你就可以随时随地做开发和学习了。

本文系作者在时代Java发表,未经许可,不得转载。

如有侵权,请联系nowjava@qq.com删除。

编辑于

关注时代Java

关注时代Java