例子：广告图片在网页中飘动，碰到网页边沿改变漂移方向 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>游戏-小太阳</title>
 6 <style>
 7 html,body{height: 100%;width: 100%;}
 8 #sunDiv{position: absolute;}
 9 #sunDiv img{width: 50px;height: 50px;}
10 </style>
11 </head>
12 <body>
13 <div id="sunDiv">
14 <img src="0.jpg">
15 </div>
16 <script type="text/javascript">
17     var sunDiv=document.getElementById("sunDiv");
18     //定两个方法 全局变量
19     var directX=1;//X轴横向的方法 初始化为1
20     var directY=1;//Y轴纵向的方法
21     var sunX=0;//太阳的坐标
22     var sunY=0;
23     function sunMove(){
24 
25         sunX+=directX;
26         sunY+=directY;
27         //修改div的left 和top就OK了
28         sunDiv.style.left=sunX+"px";
29         sunDiv.style.top=sunY+"px";
30         //判断什么时候太阳转变方向
31         //X方向方法offsetWidth返回 当前对象事件的宽度
32         if(sunX+sunDiv.offsetWidth>=document.body.clientWidth||sunX<=0)
33         {
34             directX=-directX;
35         }
36         // //判断Y方向
37         if(sunY+sunDiv.offsetHeight>=document.body.clientHeight||sunY<=0)
38         {
39             directY=-directY;
40         }
41     }
42     setInterval("sunMove()",1);
43 </script>
44 </body>
45 </html>

 

posted @ 2015-09-21 17:57  名字不能缺  阅读(833)  评论(0)    收藏  举报