浮动广告碰撞小实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>10.浮动广告</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-15 -->
10         <style>
11             *{margin:0;padding:0}
12             #div1{width:100px;height:100px;position:absolute;background:red;left:0;top:0}
13             #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;}
14         </style>
15         <script>
16             window.onload=function(){
17                 var oDiv1=document.getElementById('div1');
18                 var timer=null;
19                 var iSpeedX=10;
20                 var iSpeedY=10;
21                 timer=setInterval(function(){
22                     var L=oDiv1.offsetLeft + iSpeedX;
23                     var T=oDiv1.offsetTop + iSpeedY;
24                     oDiv1.style.left = L +'px';
25                     oDiv1.style.top = T +'px';
26                     
27                     if( T > document.documentElement.clientHeight - oDiv1.offsetHeight ){
28                         T = document.documentElement.clientHeight - oDiv1.offsetHeight;
29                         iSpeedY *= -1;
30                     }else if( T<0 ){
31                         T=0;
32                         iSpeedY *= -1;
33                     }
34                     
35                     if( L > document.documentElement.clientWidth - oDiv1.offsetWidth ){
36                         L = document.documentElement.clientWidth - oDiv1.offsetWidth;
37                         iSpeedX *= -1;
38                     }else if( L<0 ){
39                         L=0;
40                         iSpeedX *= -1;
41                     }
42                     
43                     
44                 },30)
45             }
46         </script>
47     </head>
48     <body>
49         <div id="div1"></div>
50     </body>
51 </html>
浮动广告 碰撞小实例

浮动广告碰撞小实例
