【JS漂浮广告实现原理与代码详解】
JS漂浮广告是一种常见的网页广告形式，它通过JavaScript脚本控制广告元素在页面上动态移动，通常表现为一个小图片或广告条，沿着屏幕边缘来回滚动。这类广告能够吸引用户的注意力，提高广告的可见度。在本文中，我们将深入探讨两种基本的JS漂浮广告实现方法，并分析它们的代码实现。
**第一种漂浮广告实现：**
```html
<!DOCTYPE html>
<html>
<head>
<title>漂浮广告</title>
<style>
#codefans_net {
position: absolute;
/* 链接地址 */
/* 图片地址 */
background-image: url(data:image/png;base64,PCFET0NUWVBFIGh0bWw+...);
width: 50px;
height: 60px;
left: 50px;
top: 60px;
}
</style>
</head>
<body>
<div id="codefans_net"></div>
<script>
var x = 50, y = 60;
var xin = true, yin = true;
var step = 1;
var delay = 10;
var obj = document.getElementById("codefans_net");
function float() {
var L = T = 0;
var R = document.body.clientWidth - obj.offsetWidth;
var B = document.body.clientHeight - obj.offsetHeight;
if (xin) {
x += step;
if (x >= R) {
xin = false;
x = R - step;
}
} else {
x -= step;
if (x <= L) {
xin = true;
x = L + step;
}
}
if (yin) {
y += step;
if (y >= B) {
yin = false;
y = B - step;
}
} else {
y -= step;
if (y <= T) {
yin = true;
y = T + step;
}
}
obj.style.left = x + document.body.scrollLeft + 'px';
obj.style.top = y + document.body.scrollTop + 'px';
}
setInterval(float, delay);
</script>
</body>
</html>
```
这段代码创建了一个ID为`codefans_net`的div，作为广告位。通过CSS设置了其初始位置、大小和背景图片。JavaScript部分定义了广告位的坐标变量x和y，以及滚动方向xin和yin。`float()`函数负责检测广告是否碰到屏幕边缘并调整位置。最后，使用`setInterval`定时调用`float()`函数，使广告持续移动。
**第二种漂浮广告实现：**
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>漂浮广告</title>
<style>
#img1 {
z-index: 100;
position: absolute;
left: 2px;
top: 43px;
width: 59px;
height: 61px;
visibility: visible;
}
</style>
</head>
<body>
<div id="img1"><img src="data:image/png;base64,PCFET0NUWVBFIGh0bWw+..."></div>
<script>
var img1 = document.getElementById('img1');
var pos = 2;
var limit = 100;
var timer = null;
function floatAd() {
if (pos > limit) {
pos = limit;
clearInterval(timer);
timer = setInterval(function() { img1.style.left = pos + 'px'; }, 50);
} else {
pos++;
img1.style.left = pos + 'px';
}
}
timer = setInterval(floatAd, 10);
</script>
</body>
</html>
```
这个实现方式创建了一个ID为`img1`的div，内含一个图片。CSS设置了广告的初始位置、尺寸和可见性。JavaScript部分定义了广告位置变量pos，限制值limit，以及定时器timer。`floatAd()`函数用于控制广告左右移动，当广告到达限制位置时，改变移动方向。同样，通过`setInterval`设置定时调用`floatAd()`函数，实现广告的持续漂浮。
这两种实现方式虽然简单，但已经能完成基本的漂浮广告效果。需要注意的是，这些代码并不完全符合W3C标准，因为它们没有使用现代的Web开发实践，如Flexbox或CSS Grid进行布局，也没有利用事件监听器来实现更精确的用户交互响应。在实际开发中，为了更好的兼容性和用户体验，我们可以考虑使用CSS动画或更现代的JavaScript库，如jQuery或Vue.js来实现更为复杂和响应式的漂浮广告效果。同时，考虑到无障碍性(Accessibility)，应确保广告不会干扰到主要内容的阅读，或者提供关闭广告的功能。
