JS全屏漂浮广告、移入光标停止移动-优快云博客

本文介绍了一种使用JavaScript实现的全屏漂浮广告效果，该广告会在浏览器窗口内自动移动，并且当鼠标悬停在广告上时会停止移动。通过调整代码中的参数可以改变广告的移动速度和行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS全屏漂浮广告-柯乐义</title>
 6 <style type="text/css">
 7 div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}
 8 </style>
 9 </head>
10 
11 <body>
12 <div>
13 <div><h2>JS全屏漂浮广告，移入光标停止移动·柯乐义</h2><a href="http://keleyi.com/a/bjac/ara6jk5h.htm" target="_blank">原文</a></div>
14 </div>
15 <div id="roll">我是广告<br />keleyi.com</div>
16 <script type="text/javascript">
17 var ggRoll = {
18 roll: document.getElementById("roll"),
19 speed: 20,
20 statusX: 1,
21 statusY: 1,
22 x: 100,
23 y: 300,
24 winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
25 winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
26 Go: function () {
27 this.roll.style.left = this.x + 'px';
28 this.roll.style.top = this.y + 'px';
29 
30 this.x = this.x + (this.statusX ? -1 : 1)
31 if (this.x < 0) { this.statusX = 0 }
32 if (this.x > this.winW) { this.statusX = 1 }
33 
34 this.y = this.y + (this.statusY ? -1 : 1)
35 if (this.y < 0) { this.statusY = 0 }
36 if (this.y > this.winH) { this.statusY = 1 }
37 }
38 }
39 var interval = setInterval("ggRoll.Go()", ggRoll.speed);
40 ggRoll.roll.onmouseover = function () { clearInterval(interval) };
41 ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };
42 
43 </script>
44 </body>
45 </html>