制作浮动广告的一种常见方式是使用JavaScript来控制一个HTML元素的样式，使其在页面上浮动。下面是一个简单的例子，展示了如何使用JavaScript和CSS来创建一个在页面上水平浮动的广告。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动广告示例</title>
<style>
/* 设置广告样式 */
.floatingAd {
position: absolute; /* 绝对定位 */
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
background-color: yellow; /* 背景色 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 边框盒模型 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
text-align: center; /* 文字居中 */
}
</style>
</head>
<body>
<div id="floatingAd" class="floatingAd">这是一个浮动广告！</div>
<script>
// JavaScript 代码，用于控制广告浮动
function moveAd() {
var ad = document.getElementById('floatingAd');
var maxX = window.innerWidth - ad.offsetWidth; // 计算最大可移动位置
var speed = 2; // 移动速度
var position = parseInt(ad.style.left) || 0; // 当前位置
// 如果广告到达右边界，则反向移动
if (position >= maxX) {
speed = -speed;
} else if (position <= 0) {
// 如果广告到达左边界，则正向移动
speed = Math.abs(speed);
}
// 更新广告位置
ad.style.left = (position + speed) + 'px';
// 使用requestAnimationFrame来平滑移动
requestAnimationFrame(moveAd);
}
// 初始化移动
moveAd();
</script>
</body>
</html>
在这个例子中，我们创建了一个`div`元素作为广告，并给它设置了一个类名`floatingAd`。然后，我们使用CSS来设置这个广告的样式，包括宽度、高度、背景色、内边距、阴影效果和文字居中对齐。
JavaScript部分，我们定义了一个`moveAd`函数，该函数使用`requestAnimationFrame`来循环更新广告的位置，从而实现平滑的浮动效果。通过计算广告的最大可移动位置，我们可以确保广告在到达窗口的左右边界时能够反向移动。最后，我们在页面加载完成后调用`moveAd`函数来启动广告的浮动。