js实现拖拽、弹性运动、自由落体、碰撞 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>拖拽+碰撞+重力4</title>
  6 
  7 <style>
  8 * { padding: 0; margin: 0; }
  9 #div1{
 10     width: 200px;height: 100px;position: absolute;background: orange;
 11     cursor: move;left: 20px;top: 50px;
 12 }
 13 </style>
 14 
 15 <script type="text/javascript">
 16 window.onresize=window.onload=function(){
 17     var oBtn=document.getElementById('btn1');
 18     var oDiv=document.getElementById('div1');
 19     var lastX=0;
 20     var lastY=0;
 21 
 22     //拖拽
 23     oDiv.onmousedown=function(ev){
 24         var oEvent=ev||event;
 25         var disX=oEvent.clientX-oDiv.offsetLeft;
 26         var disY=oEvent.clientY-oDiv.offsetTop;
 27         clearInterval(oDiv.timer);
 28 
 29         document.onmousemove=function(ev){
 30             var oEvent=ev||event;
 31             var l=oEvent.clientX-disX;
 32             var t=oEvent.clientY-disY;
 33 
 34             oDiv.style.left=l+'px';
 35             oDiv.style.top=t+'px';
 36 
 37             iSpeedX=l-lastX;
 38             iSpeedY=t-lastY;
 39 
 40             lastX=l;
 41             lastY=t;
 42 
 43 /*            document.title='x:'+iSpeedX+', y:'+iSpeedY;*/
 44         };
 45         document.onmouseup=function(){
 46             document.onmousemove=null;
 47             document.onmouseup=null;
 48             startMove();
 49         }        
 50         clearInterval(timer);
 51     }
 52 }
 53 
 54 var timer=null;
 55 var iSpeedX=0;
 56 var iSpeedY=0;
 57 
 58 function startMove () {
 59     clearInterval(timer);
 60     timer=setInterval(function(){
 61         var oDiv=document.getElementById('div1');
 62 
 63         iSpeedY+=3;
 64 
 65         var l=oDiv.offsetLeft+iSpeedX;
 66         var t=oDiv.offsetTop+iSpeedY;
 67         
 68         //碰到下边
 69         if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
 70             iSpeedY*=-0.8;
 71             iSpeedX*=0.8;
 72             t=document.documentElement.clientHeight-oDiv.offsetHeight;
 73         }else if(t<0){        //碰到上边
 74             iSpeedY*=-1;
 75             iSpeedX*=0.8
 76             t=0;
 77         }
 78 
 79         //碰到右边
 80         if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
 81             iSpeedX*=-0.8;
 82             l=document.documentElement.clientWidth-oDiv.offsetWidth;
 83         }else if(l<=0){        //碰到左边
 84             iSpeedX*=-0.8;
 85             l=0;
 86         }
 87 
 88         if(Math.abs(iSpeedX)<1){
 89             iSpeedX=0;
 90         }
 91         if(Math.abs(iSpeedY)<1){
 92             iSpeedY=0;
 93         }
 94 
 95         if(iSpeedX==0&&iSpeedY==0&&t==document.documentElement.clientHeight-oDiv.offsetHeight){
 96             clearInterval(timer);
 97         }else{
 98             oDiv.style.left=l+'px';
 99             oDiv.style.top=t+'px';
100         }
101     },30)
102 }
103 </script>
104 </head>
105 
106 <body>
107 <div id="div1"></div>
108 </body>
109 </html>

 

posted @ 2015-08-24 15:32  Corrots  阅读(259)  评论(0)    收藏  举报