js 居中漂浮广告


Posted in Javascript onMarch 21, 2010

程序源码

var floatAd = {}; 
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; 
}; 
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 
} 
}; 
floatAd.extend = function(destination, source) { 
for(var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
}; 
/* 默认属性扩展 */ 
floatAd.setOptions = function(options) { 
this.options = { 
delay: 20, // 调整速率 
fadeTime: 1 // 自动消失时间 
}; 
return this.extend(this.options, options || {}); 
}; 
/* 类初始化 */ 
floatAd.init = function(id, options) { 
var _this = this; 
this.extend(this, this.setOptions(options)); 
this.control = document.getElementById(id); 
var _callback = function() { // fadeIn完成后的回调函数 
_this.timer = window.setInterval(function() { _this.scroll() }, _this.delay); // 滚动定位 
window.setTimeout(function() { _this.fadeOut() }, _this.fadeTime * 1000); // 在固定时间内消失 
} 
this.fadeIn(_callback); 
window.onresize = function() { _this.setCenter(); } 
}; 
/* 定时滚动 */ 
floatAd.scroll = function() { 
this.start = parseInt(this.control.style.top, 10); 
this.end = parseInt(this.getScrollTop() + this.getBrowser().height - this.control.clientHeight, 10); 
if(this.start != this.end) { 
this.amount = Math.ceil(Math.abs(this.end - this.start) / 15); /* 递减公式(this.start无限增大,整个分子无限减小,整个值就无限趋近于0) */ 
this.control.style.top = parseInt(this.control.style.top, 10) + ((this.end < this.start) ? -this.amount : this.amount) + 'px'; 
} 
}; 
/* 目标居中并处于最底部 */ 
floatAd.setCenter = function() { 
this.top = this.getScrollTop() + floatAd.getBrowser().height; 
this.left = (this.getScrollLeft() + floatAd.getBrowser().width - this.control.clientWidth) / 2; 
this.control.style.top = this.top + 'px'; 
this.control.style.left = this.left + 'px'; 
}; 
/* fadeIn */ 
floatAd.fadeIn = function(callback) { 
var _this = this, _top = 0; 
this.control.style.display = 'block'; // *要提前显示.不然无法取得clientWidth 
this.setCenter(); 
var _timer = window.setInterval(function() { 
_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (++_top) + 'px'; 
if(_top >= _this.control.clientHeight) { 
window.clearInterval(_timer); 
callback && callback(); 
} 
}, 2); 
}; 
/* fadeOut */ 
floatAd.fadeOut = function() { 
var _this = this, _num = 0, _top = _this.control.clientHeight; 
window.clearTimeout(this.timer); 
var _timer = window.setInterval(function() { 
if(_top <= 0) { 
window.clearInterval(_timer); 
_this.control.style.display = 'none'; 
} else { 
_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (--_top) + 'px'; 
} 
}, 2); 
this.control.style.top = (parseInt(this.control.style.top, 10) + 100) + 'px'; 
}; 
var newAd = 'start'; 
document.getElementById('show').onclick = function() { 
if(newAd == 'start') { 
newAd = floatAd.init('ad', { fadeTime: 10 }); 
} 
}

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

获取可视窗口的宽高
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 
} 
};

代码思路流程
初始化(init) -----> 设置居中并隐藏底部(setCenter) -----> 渐显(fadeIn) -----> 渐显完毕.调用回调函数_callback ----->
开始倒计时渐隐时间(setTimeout(fadeOut, time)), 并绑定实时检测函数(scroll) -----> 到达自定义时间隐藏广告(fadeOut)
使用说明
实例化函数.传入广告容器ID.设置默认属性.
默认属性有:
delay: 20, // 调整速率 
fadeTime: 1 // 自动消失时间(s) 
var newAd = 'start'; 
document.getElementById('show').onclick = function() { 
if(newAd == 'start') { 
newAd = floatAd.init('ad', { fadeTime: 10 }); 
} 
}

这里为了演示方便.所以当点击按钮时候才初始化广告.也可以在window.onload的时候就载入广告.
演示下载地址 居中显示的漂浮广告代码
Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 #Javascript
js 格式化时间日期函数小结
Mar 20 #Javascript
window.location.hash 属性使用说明
Mar 20 #Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 #Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php中yii框架实例用法
2020/12/22 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
Python中实现结构相似的函数调用方法
2015/03/10 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python全排列操作实例分析
2018/07/24 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
团队精神演讲稿
2013/12/31 职场文书
小学防溺水制度
2014/01/29 职场文书
企业读书活动总结
2014/06/30 职场文书
小学生差生评语
2014/12/29 职场文书
大学感恩节活动总结
2015/05/05 职场文书