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 { width: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方向的速度)
