php漂浮广告代码,js 居中漂浮广告_广告代码
程序源码
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的时候就载入广告.
演示下载地址 居中显示的漂浮广告代码
相关标签:漂浮广告
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php漂浮广告代码,js 居中漂浮广告_广告代码相关推荐
- php js漂浮,js 居中漂浮广告
程序源码 var floatAd = {}; floatAd.getScrollTop = function(node) { var doc = node ? node.ownerDocument : ...
- 很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html显示日期时间代码,JS全中文显示日期时间代码
JS全中文显示日期时间代码_网页代码站(www.webdm.cn) function number(index1){ var numberstring="一二三四五六七八九十"; ...
- HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...
- 噬血代码进不了游戏_噬血代码联机不了怎么办 噬血代码联机失败解决方法介绍-游侠网...
噬血代码联机不了怎么办?今天我们给大家带来了噬血代码联机失败解决方法介绍,相信大家看完后,就能和小伙伴一起愉快联机了,还不知道解决方法的玩家赶紧来看看吧. 推荐阅读 联机失败解决方法介绍 多人连线不稳 ...
- python一行代码实现99乘法表_一行代码实现九九乘法表
#第一种来一个普通的 for m in range(1,10):for n in range(1,m+1):print("%d * %d = %d" %(m,n,m*n),end= ...
- python里面的代码是什么状态的_这个代码中使用Python的'wb'是什么意思?
Code: file('pinax/media/a.jpg', 'wb') 解决方案 File mode, write and binary. Since you are writing a .jpg ...
- html漂浮广告随页面移动代码,JS漂浮广告代码,慢慢漂移的广告JS代码
JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...
- Js弹性漂浮广告代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 右下角弹出广告 js,漂浮效果(兼容多浏览器)
分享非常不错的一个使用 JavaScript 实现的可最小化,可关闭的右下角浮动广告窗效果,可以随滚动条的滚动而自行滚动保持在右下角的固定位置.基本上兼容了所有的浏览器(包括IE 火狐 谷歌浏览器 苹 ...
最新文章
- Windows中的路由表和默认网关
- kotlin 类及其成员的可见性
- maven配置本地jar包
- 创建dataframe_Spark原理与实战(五) Spark核心数据抽象DataFrame
- 全球第二和第四大航运公司加入物流巨头Maersk的区块链平台
- 计算机cad标题栏快捷键,CAD标题快捷键
- 自适应PID控制基本概念及常用自适应算法
- 【Python NLP】:搜狗语料库-新闻语料处理
- 取之盈:微信电脑多开代码、电脑多开微信bat文件
- ActiveMQ反序列化漏洞 getshell(CVE-2015-5254)——漏洞复现
- 计算机操作日志文件,教你完全读懂Windows日志文件
- php调用手写板,手写板使用起来方便、快捷 其原理你知道吗?
- 无领导小组讨论面试真题解析(四)
- 如何创建 “抢占实例” 云服务器BCC?抢占式实例云服务器创建步骤
- iOS-获取手机健康步数,去除人为添加的数据
- iphone的Safari浏览器中HTML5上传图片方向问题解决方法
- 五, Hive-数据的导入和导出
- java的class文件批量反编译成java
- 何志强:张尚昀式的当代好青年
- php上传txt文件读取乱码
热门文章
- steamcom启动服务:443端口被占用,请关闭占用该端口的进程后再点击启动服务!
- 淘宝API店铺所有商品接口价格、标题、销量参数调用示例
- Linux C/C++实现时间戳转换工具
- 记前两天的中兴移动笔试以及迅雷笔试
- cpolar内网穿透工具
- ipython的安装和使用过程_数据分析之一:IPython安装及使用
- 安装ipython_linux安装IPython四种方法
- php+检测是否是手机浏览器,php 判断是否是手机浏览器访问?
- Linux操作系统搭建本地源
- idea Translation 使用有道翻译