广告浮动代码实现与兼容示例
本文档主要介绍了广告浮动代码的相关概念和实现方法,适用于网页开发者在设计和优化用户体验时添加动态广告的需求。"广告浮动"这一标签表明了文章的核心主题,即如何通过JavaScript编程技术来实现广告元素在页面上的自动适应和跟随用户滚动行为。 首先,文章引入了一个名为`addEvent`的函数,这是一个事件处理函数,它接受对象、事件类型、函数以及可选的捕获参数。这个函数的作用是为网页元素绑定事件监听器,无论是使用DOM2级的`addEventListener`方法(现代浏览器支持)还是IE浏览器特有的`attachEvent`方法,都能确保事件处理的正确执行。这个功能对于实现广告的响应式行为至关重要,比如当用户滚动页面时,广告位置随之调整。 接着,`getPageScroll`函数用于获取页面的滚动值,包括水平和垂直方向的滚动距离。通过检测`self.pageXOffset`、`document.documentElement`和`document.body`等不同环境下的滚动属性,确保了兼容性。这对于实现广告的跟随滚动效果是不可或缺的,因为它能够实时更新广告的位置,使其始终保持在用户视野范围内。 最后,`GetPageSize`函数则用于获取页面的尺寸,包括宽度和高度,这可能会影响广告的布局和展示策略。例如,如果广告需要在特定区域内显示,或者当用户滚动到底部时显示更多广告,这些尺寸信息就显得尤为重要。 这篇文档提供的广告浮动代码片段提供了一种基础且灵活的方式来管理网页上的广告,使它们既能保持可见性,又能与用户的交互无缝融合。对于需要在网站中实现动态广告投放的开发人员来说,理解和应用这些代码片段将有助于提升网站的用户体验和广告效益。
<!--
//公共脚本文件 main.js
function addEvent(obj, evtType, func, cap) {
cap = cap || false;
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
return true;
} else if (obj.attachEvent) {
if (cap) {
obj.setCapture();
return true;
} else {
return obj.attachEvent("on" + evtType, func);
}
} else {
return false;
}
}
function getPageScroll() {
var xScroll, yScroll;
if (self.pageXOffset) {
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollLeft) {
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
xScroll = document.body.scrollLeft;
}
if (self.pageYOffset) {
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
}
function GetPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) {
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
剩余5页未读,继续阅读
- 粉丝: 1
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦