js飘窗广告

【JS飘窗广告】是一种网页设计中的技术，用于在页面的任意位置显示浮动广告或提示信息，这种广告通常会跟随用户滚动页面而上下移动，从而保持在用户的视野范围内。实现这种效果主要依赖JavaScript语言和CSS样式。下面我们将深入探讨如何创建一个具有弹性和屏幕边缘反弹效果的JS飘窗广告，并兼容不同浏览器。 我们需要HTML结构来定义广告的基本元素。在给定的代码中，可以看到一个`<div>`元素（id为`ad1`）用于承载广告内容，包括一个链接`<a>`和一个关闭按钮`<div>`。关闭按钮通过点击事件触发JavaScript函数来隐藏广告。 ```html <div id="ad1" style="Z-INDEX: 5"> <a href="http://gsxt.hnaic.gov.cn/notice/" target="_blank"> <img src="/${res}/images/430000fla.gif"/> </a> <div style="width:11px;height:11px;"> <img src='/${res}/images/close.gif' alt=' 关 闭 ' style="cursor:hand;border:0;margin-left: 45px" onclick="javascript:document.getElementById('ad1').style.display='none';"/> </div> </div> ``` 接着，我们分析JavaScript部分。这段代码包含两个主要函数：`addEvent` 和 `getPageScroll`。 1. `addEvent` 函数是一个事件监听器的兼容性处理函数，用于在不同浏览器环境下添加事件监听。它接受四个参数：目标对象、事件类型、处理函数和是否捕获。这个函数检查浏览器是否支持`addEventListener`（现代浏览器）或`attachEvent`（旧版IE），然后选择相应的方法绑定事件。 2. `getPageScroll` 函数用于获取当前页面的滚动位置，返回一个数组，包含水平和垂直滚动距离。这个函数对不同浏览器的滚动行为进行了兼容处理，确保在任何浏览器中都能正确获取滚动值。 要实现飘窗广告的效果，我们需要一个额外的函数，例如`followScroll`，它会在页面滚动时被调用，计算广告的新位置并更新其CSS。这通常会通过`window.onscroll`事件来触发。由于代码片段中没有提供这部分，以下是一个简单的实现示例： ```javascript function followScroll() { var ad = document.getElementById('ad1'); var scrollPos = getPageScroll(); var windowSize = GetPageSize(); // 计算广告新的Y坐标，使其保持在屏幕边缘附近 var newTop = scrollPos[1] + (windowSize[1] - ad.offsetHeight) / 2; // 确保广告不会超出页面范围 if (newTop < 0) newTop = 0; if (newTop + ad.offsetHeight > windowSize[1]) newTop = windowSize[1] - ad.offsetHeight; // 更新广告的位置 ad.style.top = newTop + 'px'; } // 添加滚动事件监听 addEvent(window, 'scroll', followScroll); ``` `followScroll`函数首先获取广告元素，然后计算出一个新位置，使得广告始终在屏幕中央。接着，它检查这个新位置是否超出页面边界，并根据需要进行调整。它通过设置`ad.style.top`来更新广告的CSS位置。 为了实现反弹效果，可以在计算新位置时增加一个判断，如果广告即将触碰到屏幕边缘，可以给予一个反向的偏移量，使得广告看起来像是“弹回”了。这需要在`followScroll`函数中添加额外的逻辑。 在实际应用中，还可能需要考虑广告的动画效果，比如平滑过渡到新位置，这可以通过CSS3的`transition`属性或者JavaScript的定时器来实现。 JS飘窗广告通过JavaScript和CSS结合，实现了广告元素在页面滚动时的动态定位和屏幕边缘反弹效果，同时通过兼容性处理，确保在各种主流浏览器中都能正常工作。