发布时间:2025-12-10 13:17:00 浏览次数:14
在网页开发中,漂浮广告是一种很常见的广告形式,它可以吸引用户的眼球,达到推广产品或服务的目的。下面介绍一段基本的 HTML 漂浮广告代码。
<style>#float-ad {position: absolute; /* 设置为绝对定位 */top: 100px; /* 广告距离页面上方的距离 */left: 50%; /* 广告距离页面左边的距离 */margin-left: -150px; /* 设置广告左外边距为自身宽度的一半,使其居中 */z-index: 100; /* 设置广告层级 */width: 300px; /* 广告宽度 */height: 250px; /* 广告高度 */background-color: #fff; /* 广告背景颜色 */border: 1px solid #ccc; /* 广告边框 */box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 广告阴影效果 */padding: 10px; /* 广告内边距 */line-height: 24px; /* 广告字体行高 */font-size: 14px; /* 广告字体大小 */}</style><p ><p>这里是广告内容。</p></p><script>var floatAd = document.getElementById("float-ad");var topPos = parseInt(floatAd.style.top);var direction = "down"; /* 初始向下移动 */setInterval(function () {if (direction == "down") {topPos += 1;} else {topPos -= 1;}floatAd.style.top = topPos + "px";if (topPos == 150) {direction = "up"; /* 到达底部后改变方向向上移动 */} else if (topPos == 100) {direction = "down"; /* 到达顶部后改变方向向下移动 */}}, 10); /* 每10毫秒移动一像素 */</script>上面的代码中,首先定义了一个 ID 为 float-ad 的 p 元素,设置了其样式为绝对定位,并指定了其位置、大小、背景颜色、边框、内边距、字体大小等属性。接着使用 JavaScript 实现了广告的向下移动和向上移动,以达到漂浮的效果。可以根据实际需求修改代码中的参数来调整广告的样式和移动方式。