JS简单回弹原理

 1 /*
 2 *JS简单回弹原理
 3 */
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <style type="text/css">
10 *{ padding:0; margin:0;}
11 #div1 { 100px; height:100px; position:absolute; background:red;}
12 </style>
13 
14 <script type="text/javascript">
15 window.onload = function (){
16     startMove("div1");
17     function startMove(id){
18          var iSpeedX = 10;
19          var iSpeedY = 10;
20         setInterval(function(){
21             var oDiv = document.getElementById(id);
22              
23              var l = oDiv.offsetLeft + iSpeedX;　　　　//物体在X方向上的位移
24              var t = oDiv.offsetTop + iSpeedY;　　　　//物体在Y方向上的位移
25              
26             document.title = l + " , " + t + " , " + iSpeedX + " , " + iSpeedY;　　　　//在标题栏显示位移坐标和当前在X、Y方向上的速度
27             
28              if(t > document.documentElement.clientHeight - oDiv.offsetHeight){　　　　//判断物体在Y方向上是否超出屏幕可视区的底部
29                 t =  document.documentElement.clientHeight - oDiv.offsetHeight;
30                 iSpeedY *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前在Y方向上的速度、回弹
31              }else if(t < 0){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断物体在Y方向上是否超出屏幕可视区的顶部
32                 t = 0;
33                 iSpeedY *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//再改变当前在Y方向上的速度、回弹 
34              }
35              if(l > document.documentElement.clientWidth - oDiv.offsetWidth){　　　　　　//判断物体当前在X方向上是否超出屏幕可视区的右边
36                 l = document.documentElement.clientWidth - oDiv.offsetWidth;
37                 iSpeedX *= -1; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前在X方向上的速度、回弹
38              }else if(l < 0){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断物体当前在X方向上是否超出屏幕可视区的左边
39                 l = 0;
40                 iSpeedX *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前物体在X方向上的速度、回弹
41              }
42               
43              oDiv.style.left = l + "px";
44              oDiv.style.top = t + "px";
45                      
46         },30);
47     }
48 }
49 </script>
50 </head>
51 
52 <body>
53 
54 <div id="div1"></div>
55 
56 </body>
57 </html>
给物体初始一个在X、Y方向上的运动速度。
通过定时器改变物体左右坐标改变left、top的值来实现位移效果
判断物体是否超出可视区的边界值(改变物体在X、Y方向的速度)