JS实现弹窗广告，自动反弹及屏幕跟随

"这篇文档介绍的是如何在网页中实现一个js飘窗广告，该广告具有碰到屏幕边缘反弹的效果，并能随着页面滚动而移动，适用于多种主流浏览器。代码示例包括了广告图片、关闭按钮以及相应的JavaScript函数来处理事件监听和页面滚动时的飘窗位置更新。" 飘窗广告是一种常见的网页广告形式，它通常会出现在页面的角落或者某个固定位置，吸引用户的注意力。在本例中，js飘窗广告的实现主要涉及以下几个技术点： 1. **HTML结构**： - `div`元素`ad1`作为广告容器，设置了`Z-INDEX:5`确保广告位于页面的顶层。 - `a`标签用于链接广告内容，内嵌`img`标签展示广告图片。 - 内部另一个`div`包含一个关闭按钮，点击后隐藏广告。 2. **CSS样式**： - 定义了广告的宽度和高度，以及关闭按钮的位置和样式。 - 关闭按钮的`onclick`属性绑定了JavaScript函数，用于在点击时隐藏广告。 3. **JavaScript**： - `addEvent`函数是事件绑定的兼容性处理，支持`addEventListener`和`attachEvent`，用于添加事件监听器。 - `getPageScroll`函数用来获取当前页面的滚动位置，这是飘窗广告跟随页面滚动的关键。 - 当页面滚动时，通过调整广告元素的`style.left`和`style.top`属性，可以使其保持在屏幕的特定位置。 4. **事件监听**： - 需要监听窗口的滚动事件，以更新广告的位置。这可以通过`addEvent(window, 'scroll', updateAdPosition)`来实现，其中`updateAdPosition`是处理滚动事件的函数。 - 当广告靠近屏幕边缘时，可以添加反弹效果。这通常涉及到计算广告的位置和屏幕边界，然后根据距离改变其运动速度或方向。 5. **浏览器兼容性**： - 由于不同的浏览器可能有不同的事件处理和DOM操作方式，因此在编写JavaScript代码时，需要考虑跨浏览器的兼容性。例如，使用`addEvent`函数是为了兼容IE和其他现代浏览器。 6. **关闭按钮行为**： - 当用户点击关闭按钮时，通过修改`ad1`的`display`属性为`none`，可以将广告隐藏，提供良好的用户体验。 实现js飘窗广告的关键在于理解HTML结构、CSS布局、JavaScript事件处理以及浏览器兼容性的需求。通过结合这些技术，我们可以创建出一种动态且用户友好的广告形式，同时考虑到用户的交互体验。