点击这里查看效果
以下是代码：
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>