1 <!DOCTYPE HTML> 2 <html lang="en"> 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 id="roll">我是广告</div> 13 <script type="text/javascript"> 14 var ggRoll = { 15 roll : document.getElementById("roll"), 16 speed : 20, 17 statusX : 1, 18 statusY : 1, 19 x : 100, 20 y : 300, 21 winW : document.documentElement.clientWidth - document.getElementById("roll").offsetWidth, 22 winH : document.documentElement.clientHeight - document.getElementById("roll").offsetHeight, 23 Go : function(){ 24 this.roll.style.left=this.x+'px'; 25 this.roll.style.top=this.y+'px'; 26 27 this.x = this.x + (this.statusX? -1: 1) 28 if(this.x < 0) {this.statusX = 0} 29 if(this.x > this.winW) {this.statusX = 1} 30 31 this.y = this.y + (this.statusY? -1: 1) 32 if(this.y < 0) {this.statusY = 0} 33 if(this.y > this.winH) {this.statusY = 1} 34 } 35 } 36 var interval = setInterval("ggRoll.Go()", ggRoll.speed); 37 ggRoll.roll.onmouseover = function(){clearInterval(interval)}; 38 ggRoll.roll.onmouseout = function(){interval = setInterval("ggRoll.Go()", ggRoll.speed)}; 39 40 </script> 41 42 43 </body> 44 </html>