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 pull motion of gravity collision-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 ();
}