居中显示的漂浮广告代码

脚本大小：4KB
脚本语言：简体中文
脚本类型：国产软件
脚本授权：免费软件
更新时间：2010-03-21 11:17:44
脚本类别：悬浮漂浮
相关链接： 官方网址  无演示
网友评分：3分
应用平台：Windows平台

程序原理
整个广告运行具有四步动作.
1. 初始化时隐藏于页面最底部.
2. 自底向上升起.直到整个广告漂浮出来
3. 启动检测.滚动时保持广告始终处于页面中间最底部.
4. 到达自定义间隔时间.广告自动渐隐.
整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrollTop + browser.clientHeight).这里提供了获取这几个值的代码.
获取scrollTop, scrollLeft
注意Chrome和Safari即使在标准doc模式下的根文档也是document.body而不是document.documentElement

1. 
   
2. floatAd.getScrollTop = function(node) {
   
3. var doc = node ? node.ownerDocument : document;
   
4. return doc.documentElement.scrollTop || doc.body.scrollTop;
   
5. };
   
6. floatAd.getScrollLeft = function(node) {
   
7. var doc = node ? node.ownerDocument : document;
   
8. return doc.documentElement.scrollLeft || doc.body.scrollLeft;
   
9. };
   

复制代码

获取可视窗口的宽高

1. 
   
2. floatAd.getBrowser = function() {
   
3. var d = document.documentElement;
   
4. return {
   
5. width: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth,
   
6. height: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight
   
7. }
   
8. };
   

复制代码

代码思路流程
初始化(init) -----> 设置居中并隐藏底部(setCenter) -----> 渐显(fadeIn) -----> 渐显完毕.调用回调函数_callback ----->
开始倒计时渐隐时间(setTimeout(fadeOut, time)), 并绑定实时检测函数(scroll) -----> 到达自定义时间隐藏广告(fadeOut)
使用说明
实例化函数.传入广告容器ID.设置默认属性.
默认属性有:

1. 
   
2. delay: 20, // 调整速率
   
3. fadeTime: 1 // 自动消失时间(s)
   
4. var newAd = 'start';
   
5. document.getElementById('show').onclick = function() {
   
6. if(newAd == 'start') {
   
7. newAd = floatAd.init('ad', { fadeTime: 10 });
   
8. }
   
9. }
   

复制代码

这里为了演示方便.所以当点击按钮时候才初始化广告.也可以在window.onload的时候就载入广告.  


四五互联移动下载

群英网络电信下载

巨牛网络电信下载

创梦网络电信下载