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 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
使用ES6语法重构React代码详解
May 09 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
node crawler如何添加promise支持
Feb 01 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简单静态页生成过程
2008/03/27 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
checkbox使用示例
2013/08/23 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
chrome调试javascript详解
2015/10/21 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
护理专业学生职业生涯规划范文
2014/03/11 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
企业文化宣传标语
2014/06/09 职场文书
学期个人工作总结
2015/02/13 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers