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 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php微信公众平台开发类实例
2015/04/01 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
python实现图片批量剪切示例
2014/03/25 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python两个list[]相加的实现方法
2020/09/23 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
领导干部廉政自律承诺书
2014/05/26 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
公司委托书格式范文
2014/10/09 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
银行资信证明
2015/06/17 职场文书
消防安全主题班会
2015/08/12 职场文书