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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
jsPDF导出pdf示例
May 02 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python执行外部程序的常用方法小结
2015/03/21 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
初中生评语大全
2014/04/24 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
导游词开场白
2015/01/31 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
python必学知识之文件操作(建议收藏)
2021/05/30 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis