碰壁反弹实际上就是通过不同的改变它的left和top值或者margin值实现的,里面有一点是我觉得比较重要的,当走到一边的时候返回的时候如何能让它一直--。代码如下:
- <body οnlοad="test()">
- <div class="father">
- <div class="son"> </div>
- </div>
- <script type="text/javascript">
- var divs=document.getElementsByTagName("div");
- var a=divs[0].clientWidth-divs[1].offsetWidth;
- var b=divs[0].clientHeight-divs[1].offsetHeight;
- var aa=divs[1].offsetLeft;
- var bb=divs[1].offsetTop;
- var m1=true;
- var m2=true;
- function move1(){
- if(m1){
- if(aa<a){aa++;divs[1].style.left=aa+"px";}
- else m1=false;
- }
- else{
- if(aa>0){aa--;divs[1].style.left=aa+"px";}
- else m1=true;
- }
- }
- function move2(){
- if(m2){
- if(bb<b){bb++;divs[1].style.top=bb+"px";}
- else m2=false;
- }
- else{
- if(bb>0){bb--;divs[1].style.top=bb+"px";}
- else m2=true;
- }
- }
- function test(){
- var time1=setInterval("move1()",10);
- var time2=setInterval("move2()",10);
- }
- </script>
转载于:https://blog.51cto.com/zhanfeng/1018028