js 反弹

碰壁反弹所要的效果是一个小块在一个大的DIV里做X轴和Y轴的匀速运动，然后碰壁反弹：

 

 
其实这就跟高中物理差不多，大家回去翻翻书，大概就明白了。

首先，我们要明白小块移动的范围：X轴为大div的内容宽减去小div所占宽度；同理，y轴为大div的内容高减去小div所占高度。当小div与大div的左侧之间的距离（scrollLeft）小于x轴的移动范围时，则小div与大div的左侧之间的距离持续增加，当距离大于等于移动范围后，则让小div返回，返回后，当距离小于等于0时又返回正方向移动。y轴同理。其中碰壁反弹我们需要用布尔值来进行判断。

完整代码如下：

HTML:

<div id="father"> 

     <div id="son"> </div> 

</div>

CSS:

body,div{ margin:0;padding:0; } 

 #father{ width:500px;height:300px; border:5px green solid; } 

 #son{ width:50px;height:50px; }

JS:

<script type="text/javascript"> 

 var father = document.getElementById('father');//获取父标签 

 var son = document.getElementById('son');//获取子标签 

 var fatherWidth = father.clientWidth;//获取父标签内容宽 

 var fatherHeight = father.clientHeight;//获取父标签内容高 

 var sonWidth = son.offsetWidth;//获取子标签所占宽度 

 var sonHeight = son.offsetHeight;//获取子标签所占高度 

 var fishWidth = fatherWidth - sonWidth;//获取子标签移动宽度 

 var fishHeight = fatherHeight - sonHeight;//获取子标签移动高度 

 var a = son.offsetLeft;//获取子标签运动宽度 

 var b = son.offsetTop;//获取子标签运动高度 

 var x = 0;//x轴，0为正，1为负 

 var y = 0;//y轴，0为正，1为负 

 function move(){ 

  //子标签x轴正方向移动，当运动宽度小于运动范围，则运动宽度持续增加，否则为1（flase）

      if (x == 0){ 

           if (a < fishWidth){

  a++;

 son.style.marginLeft = a + 'px'; 

 }else{

 x = 1; 

 } 

      }

//子标签x轴负方向移动，当运动宽度大于0，则运动宽度持续减少，否则为0（ture）

 if (x == 1){ 

 if (a > 0){

  a--;

 son.style.marginLeft = a + 'px';

           }else{

 x = 0; 

  } 

      } 

 //y轴同上 

 if (y == 0){

 if (b < fishHeight){ 

               b++; 

 son.style.marginTop = b + 'px'; 

 }else{

 y = 1; 

 } 

 } 

      if (y == 1){ 

           if (b > 0){

  b--; 

  son.style.marginTop = b + 'px';

          }else{ 

  y = 0; 

         } 

 }

 } 

 setInterval(move,17);

 </script>