A sample of the motion effect of the JavaScript to realize the gravity bounce pull

This article for you to introduce the use of JavaScript to achieve the gravity bounce drag-and-drop movement of the specific call method, interested friends can refer to ha

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

Call Example:
var GCDM = Gcdmove (odiv,100,0);
Gcdm.startmove ()/Start movement
Gcdm.stopmove ()/End movement
This section of JS code has been encapsulated, the code is as follows:
Brief description-obj is the object element to be changed, usually a div;ispeedx,ispeedy for Div's Landscape (right), vertical (lower) initial speed, of course, can also be set to zero.

Copy Code code as follows:

/**


* @Desc Gravity Collision Drag movement-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.documentelement.clientheight-obj.offsetheight) {


Ispeedy *=-0.8;


Ispeedx *= 0.8;


t = document.documentelement.clientheight-obj.offsetheight;


} else if (T <= 0) {


ispeedy *=-1;


Ispeedx *= 0.8;


t = 0;


}


if (l >= document.documentelement.clientwidth-obj.offsetwidth) {


Ispeedx *=-0.8;


L = document.documentelement.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.documentelement.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 ();


}