发布时间：2025-12-09 17:33:58 浏览次数：4
漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。
我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。
代码如下（示例）：
<style type="text/css">#p1 {width: 300px;height: 300px;padding: 0;margin: 0;position: fixed;left: 0;top: 0;}#p1 img {width: 300px;height: 300px;}</style><script>window.onload = function () {//获取元素var p1 = document.getElementById('p1');var w = document.documentElement.clientWidth;var h = document.documentElement.clientHeight;var gox = 1;var goy = 1;var a=0;//广告漂浮function move() {var x = p1.offsetLeft;var y = p1.offsetTop;if (x > w - 300 || x < 0) gox = -gox;p1.style.left = x + (10 * gox) + 'px';if (y > h - 300 || y < 0) goy = -goy;p1.style.top = y + (10 * goy) + 'px';}//漂浮定时器var timer = setInterval(move, 30);//移入移出时广告的浮动p1.onmouseover = function () {clearInterval(timer);}p1.onmouseout = function () {timer = setInterval(move, 30);}//点击一次跳转到另一个页面，点击两次广告消失p1.onclick = function() {if (a === 0) {var neww = window.open('_blank');neww.location = "http://www.baidu.com";a++;} else {this.style.display = "none";}}}</script></head><body><p id="p1"><img src="1.png" alt=""/></p></body>效果如下：
阿海不知道如何上传动态图片，大家可以复制代码去查看
如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流