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

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

  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 AREA123     var gcdMove = function() {124 125         if (!iSpeedX) {126             iSpeedX = 0;127         }128         if (!iSpeedY) {129             iSpeedY = 0;130         }131     }132     133     gcdMove();134 }