Javascript实现重力弹跳拖拽运动效果

声明：

By：GenialX

个人主页：胡旭博客 - www.ihuxu.com

QQ：2252065614

演示地址：

http://www.ihuxu.com/project/gcdmove/

调用示例：

var GCDM = gcdMove(oDiv,100,0);

GCDM.startMove();//开始运动

GCDM.stopMove();//结束运动

该段JS代码已经封装好了，代码如下：

简要说明 - obj为要改动的对象元素，通常为某个div；iSpeedX，iSpeedY为div出师的横向（右侧），竖向（下）的初始速度，当然也可以设为零。

  1 /**
  2  * @Desc 重力碰撞拖拽运动 - Gravity Crash Drag Move(gcdMove)
  3  * @Author GenialX
  4  * @URL www.ihuxu.com
  5  * @QQ 2252065614
  6  * @Date 2013.06.22
  7  */
  8 
  9 function gcdMove(obj, iSpeedX, iSpeedY) {
 10 
 11     _this = this;//public identifier
 12 
 13     //construct fun
 14     var gcdMove;
 15     //self defined fun
 16     var start;
 17     _this.startMove;
 18     //other var
 19     var iTimer;
 20     var iLastX = 0;
 21     var iLastY = 0;
 22 
 23     //construct fun
 24     start = function() {
 25         clearInterval(iTimer);
 26 
 27         iTimer = setInterval(function() {
 28 
 29             iSpeedY += 3;
 30 
 31             var l = obj.offsetLeft + iSpeedX;
 32             var t = obj.offsetTop + iSpeedY;
 33 
 34             if (t >= document.documentElement.clientHeight - obj.offsetHeight) {
 35                 iSpeedY *= -0.8;
 36                 iSpeedX *= 0.8;
 37                 t = document.documentElement.clientHeight - obj.offsetHeight;
 38             } else if (t <= 0) {
 39                 iSpeedY *= -1;
 40                 iSpeedX *= 0.8;
 41                 t = 0;
 42             }
 43 
 44             if (l >= document.documentElement.clientWidth - obj.offsetWidth) {
 45                 iSpeedX *= -0.8;
 46                 l = document.documentElement.clientWidth - obj.offsetWidth;
 47             } else if (l <= 0) {
 48                 iSpeedX *= -0.8;
 49                 l = 0;
 50             }
 51 
 52             if (Math.abs(iSpeedX) < 1) {
 53                 iSpeedX = 0;
 54             }
 55 
 56             if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight) {
 57                 clearInterval(iTimer);
 58             }
 59 
 60             obj.style.left = l + 'px';
 61             obj.style.top = t + 'px';
 62 
 63         }, 30);
 64     }
 65     
 66     _this.startMove = function(){
 67             obj.onmousedown = function(ev) {
 68 
 69         clearInterval(iTimer);
 70 
 71         var oEvent = ev || event;
 72 
 73         var disX = oEvent.clientX - obj.offsetLeft;
 74         var disY = oEvent.clientY - obj.offsetTop;
 75 
 76         document.onmousemove = function(ev) {
 77             var oEvent = ev || event;
 78 
 79             var l = oEvent.clientX - disX;
 80             var t = oEvent.clientY - disY;
 81 
 82             obj.style.left = l + 'px';
 83             obj.style.top = t + 'px';
 84 
 85             if(iLastX ==0){
 86                 iLastX = l;
 87             }
 88             if(iLastY == 0){
 89                 iLastY = t;
 90             }
 91             iSpeedX = l - iLastX;
 92             iSpeedY = t - iLastY;
 93 
 94             iLastX = l;
 95             iLastY = t;
 96 
 97         }
 98     }
 99 
100     obj.onmouseup = function() {
101         document.onmousedown = null;
102         document.onmousemove = null;
103         document.onmouseup = null;
104         start();
105     }
106         start();
107     }
108     
109     _this.stopMove = function(){
110         clearInterval(iTimer);
111         obj.onmousedown = null;
112         document.onmousemove = null;
113         obj.onmouseup = null;
114         iLastX = 0;
115         iLastY = 0;
116         iSpeedX = 0;
117         iSpeedY = 0;
118         disX = 0;
119         disY = 0;
120     }
121     
122     //CONSTRUCT AREA
123     var gcdMove = function() {
124 
125         if (!iSpeedX) {
126             iSpeedX = 0;
127         }
128         if (!iSpeedY) {
129             iSpeedY = 0;
130         }
131     }
132     
133     gcdMove();
134 }