全屏漂浮广告代码：带关闭按钮实现

4星 · 超过85%的资源需积分: 37 139 浏览量更新于2024-10-23 4 收藏 2KB TXT 举报

本文档提供了一段用于创建带关闭按钮的全屏漂浮广告的HTML和JavaScript代码。首先，我们来分析这段代码中的关键知识点： 1. **HTML结构**: - `<div id="img" ...>`：这是广告容器，设置其`position: absolute;`属性使其成为浮动元素。`left`和`top`属性指定了广告的初始位置，`visibility: hidden;`隐藏广告，直到用户鼠标悬停时显示。 - `<a href="#" target="_blank">`：链接标签，指向外部链接，广告点击后在新窗口打开。 - `<img border="0" src="http://www.webjx.com/img/200406301.jpg">`：包含广告图片，当用户点击关闭按钮或离开广告区域时，图片会隐藏。 - `<span onclick="...">ر</span>`：一个带有红色文本的关闭按钮，当用户点击时调用`clearInterval(interval)`隐藏广告。 2. **JavaScript逻辑**: - `var`声明了多个变量，如`xPos`、`yPos`等，用于存储广告的位置信息。 - `function changePos()`：这个函数负责广告的动态位置调整，根据窗口大小和滚动条位置动态改变广告的位置。当`yon`为真时，广告将向下移动。 - `setInterval('changePos()', delay)`：设置定时器，每隔`delay`毫秒执行一次`changePos`函数，实现广告的自动滑动效果。 - `clearInterval(interval)`：当用户点击关闭按钮时，停止广告的自动滑动。 - `pause`变量控制广告是否暂停移动，当用户鼠标悬停时，暂停广告移动，鼠标离开时恢复。 3. **CSS和事件处理**: - `onmouseover`和`onmouseout`事件监听器：分别在鼠标悬停和移出广告区域时触发，控制广告的可见性。 4. **全屏漂浮**: - 通过`position: absolute;`和`left/top`属性，广告能够跟随浏览器窗口的滚动而保持相对固定的位置，达到全屏漂浮的效果。这段代码展示了如何利用JavaScript动态控制HTML元素在页面上的位置，以及结合CSS事件处理实现一个带关闭按钮的全屏漂浮广告。这对于网站设计者来说，是创建交互式用户体验的一种常见技术手段，适用于需要吸引用户注意力并提供简单操作的广告展示场景。

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带关闭按钮的网页漂浮广告代码webjx.com</title>
</head>
<body>
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="right">
<a href="#" target="_blank"><img border="0" src="http://www.webjx.com/img/200406301.jpg"></a><br><span style="CURSOR:hand;color:red;font-weight:bold" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭</span>
</div>
<script language=javascript>
var xPos = 20;//from webjx.com
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {

下载后可阅读完整内容，剩余2页未读，立即下载

ruirui583

粉丝: 8
资源: 1

全屏漂浮广告代码：带关闭按钮实现

网页飘窗代码

jquery网页内飘窗代码

漂浮广告代码(点击可关闭)

jquery全屏漂浮广告插件，可点击关闭

全屏漂浮广告图层效果源码免费下载

js可关闭全屏广告代码.rar

全屏图片广告随机漂浮可点击关闭jQuery特效.zip

网页广告动态代码

网页广告 代码全集 js 广告代码 62-120 大全 (B)

网页广告 代码全集 js 广告代码 大全 1-61 (A)

最新资源

网页广告代码全集 js 广告代码 62-120 大全 (B)

网页广告代码全集 js 广告代码大全 1-61 (A)