Example of how Javascript achieves gravity bounce drag

Demo address:
Http://www.ihuxu.com/project/gcdmove/

Call example:
Var GCDM = gcdMove (oDiv, 100,0 );
GCDM. startMove (); // start Motion
GCDM. stopMove (); // end the motion
This section of JS Code has been encapsulated. The Code is as follows:
Brief description-obj is the object element to be modified, usually a div; iSpeedX; iSpeedY is the vertical (right) and vertical (bottom) Initial Velocity of the div employee, of course, it can also be set to zero.
Copy codeThe Code is as follows:
/**
* @ Desc Gravity collision Drag motion-Gravity Crash Drag Move (gcdMove)
* @ Author GenialX
* @ URL www.ihuxu.com
* @ QQ 2252065614
* @ Date 2013.06.22
*/
Function gcdMove (obj, iSpeedX, iSpeedY ){
_ This = this; // public identifier
// Construct fun
Var gcdMove;
// Self defined fun
Var start;
_ This. startMove;
// Other var
Var iTimer;
Var iLastX = 0;
Var iLastY = 0;
// Construct fun
Start = function (){
ClearInterval (iTimer );
ITimer = setInterval (function (){
ISpeedY + = 3;
Var l = obj. offsetLeft + iSpeedX;
Var t = obj. offsetTop + iSpeedY;
If (t> = document.doc umentElement. clientHeight-obj. offsetHeight ){
ISpeedY * =-0.8;
ISpeedX * = 0.8;
T = document.doc umentElement. clientHeight-obj. offsetHeight;
} Else if (t <= 0 ){
ISpeedY * =-1;
ISpeedX * = 0.8;
T = 0;
}
If (l> = document.doc umentElement. clientWidth-obj. offsetWidth ){
ISpeedX * =-0.8;
L = document.doc umentElement. clientWidth-obj. offsetWidth;
} Else if (l <= 0 ){
ISpeedX * =-0.8;
L = 0;
}
If (Math. abs (iSpeedX) <1 ){
ISpeedX = 0;
}
If (iSpeedX = 0 & iSpeedY = 0 & t = document.doc umentElement. clientHeight-obj. offsetHeight ){
ClearInterval (iTimer );
}
Obj. style. left = l + 'px ';
Obj. style. top = t + 'px ';
}, 30 );
}
_ This. startMove = function (){
Obj. onmousedown = function (ev ){
ClearInterval (iTimer );
Var oEvent = ev | event;
Var disX = oEvent. clientX-obj. offsetLeft;
Var disY = oEvent. clientY-obj. offsetTop;
Document. onmousemove = function (ev ){
Var oEvent = ev | event;
Var l = oEvent. clientX-disX;
Var t = oEvent. clientY-disY;
Obj. style. left = l + 'px ';
Obj. style. top = t + 'px ';
If (iLastX = 0 ){
ILastX = l;
}
If (iLastY = 0 ){
ILastY = t;
}
ISpeedX = l-iLastX;
ISpeedY = t-iLastY;
ILastX = l;
ILastY = t;
}
}
Obj. onmouseup = function (){
Document. onmousedown = null;
Document. onmousemove = null;
Document. onmouseup = null;
Start ();
}
Start ();
}
_ This. stopMove = function (){
ClearInterval (iTimer );
Obj. onmousedown = null;
Document. onmousemove = null;
Obj. onmouseup = null;
ILastX = 0;
ILastY = 0;
ISpeedX = 0;
ISpeedY = 0;
DisX = 0;
DisY = 0;
}
// CONSTRUCT AREA
Var gcdMove = function (){
If (! ISpeedX ){
ISpeedX = 0;
}
If (! ISpeedY ){
ISpeedY = 0;
}
}
GcdMove ();
}