带关闭按钮的漂浮广告代码

### 带关闭按钮的漂浮广告代码解析 在现代网页设计中，为了更好地吸引用户注意力并推广特定产品或服务，开发人员常常会在网页中加入各种形式的广告。其中，带有关闭按钮的漂浮广告是一种非常实用且受欢迎的形式。本文将深入分析一个具体的带有关闭按钮的漂浮广告代码示例，帮助读者理解其实现原理和技术细节。 #### 代码结构概览 我们来看一下这段代码的基本结构。代码主要分为两个部分：JavaScript脚本和HTML元素。 1. **JavaScript脚本**：负责处理广告的显示逻辑，包括控制广告的显示与隐藏、实现漂浮效果等。 2. **HTML元素**：定义了广告的具体内容，包括图片链接、关闭按钮等。 #### JavaScript逻辑详解 接下来，我们将对JavaScript脚本进行详细分析。 ##### 1. 隐藏广告函数 `hidead()` ```javascript function hidead() { document.getElementById("ad").style.display = "none"; } ``` 这个简单的函数用于隐藏带有ID为`ad`的元素，即整个广告模块。当用户点击“关闭广告”按钮时，会触发该函数，从而隐藏广告。 ##### 2. 广告位置更新函数 `floatAD()` ```javascript function floatAD() { var L = T = 0; var R = document.body.clientWidth - obj.offsetWidth; var B = document.body.clientHeight - obj.offsetHeight; obj.style.left = x + document.body.scrollLeft; obj.style.top = y + document.body.scrollTop; x = x + step * (xin ? 1 : -1); if (x < L) { xin = true; x = L; } if (x > R) { xin = false; x = R; } y = y + step * (yin ? 1 : -1); if (y < T) { yin = true; y = T; } if (y > B) { yin = false; y = B; } } ``` 这段代码实现了广告的动态漂浮效果。它通过不断调整广告的位置（左、右、上、下），使广告在屏幕内以随机方向移动，从而吸引用户的注意力。 - **变量定义**： - `x` 和 `y` 分别表示广告的初始横纵坐标。 - `xin` 和 `yin` 控制广告左右上下移动的方向。 - `step` 表示每次移动的距离。 - `delay` 定义了移动的频率（毫秒）。 - `L`、`T`、`R` 和 `B` 分别表示广告可以移动的左、上、右、下边界。 - **逻辑处理**： - 使用 `setInterval` 方法定时调用 `floatAD` 函数，使广告持续移动。 - 通过 `onmouseover` 和 `onmouseout` 事件监听器，在鼠标移入和移出广告区域时停止和恢复移动，提升用户体验。 ##### 3. 初始化设置 ```javascript var x = 50, y = 60; var xin = true, yin = true; var step = 1; var delay = 1; var obj = document.getElementById("ad"); var itl = setInterval("floatAD()", delay); obj.onmouseover = function () { clearInterval(itl) }; obj.onmouseout = function () { itl = setInterval("floatAD()", delay) }; ``` 这部分代码设置了广告的初始状态，包括初始位置、移动速度等，并启动了广告的自动漂浮功能。 #### HTML元素分析 我们来看看HTML部分： ```html <div id="ad" style="position:absolute"> <a href="http://www.beiyang.com/mail/email1.html" target="_blank"> <img src="11.jpg" width="210" border="0" title="点击参看详情"> </a> <DIV onclick="hidead();" style="FONT-SIZE:9pt; CURSOR:hand" align=right>关闭广告×</DIV> </div> ``` - **广告容器**：使用 `<div>` 元素作为广告的容器，并设置了绝对定位。 - **链接和图片**：通过 `<a>` 和 `<img>` 标签定义了一个可点击的图片链接，指向特定页面。 - **关闭按钮**：使用 `<DIV>` 元素创建了一个“关闭广告”按钮，点击时会触发 `hidead()` 函数。 这段代码通过巧妙地结合HTML和JavaScript技术，实现了一个既美观又实用的带关闭按钮的漂浮广告。这种类型的广告不仅能够有效地提高网站的互动性，还能够在一定程度上减少用户对于广告的反感。