JavaScript drag-and-drop, collision, gravity, and elastic movement instance analysis, and javascript instance analysis

JavaScript drag-and-drop, collision, gravity, and elastic movement instance analysis, and javascript instance analysis

This article describes how to implement JavaScript drag, collision, gravity, and elastic movement. We will share this with you for your reference. The details are as follows:

Js drag, collision, and gravity implementation code:

Window. onload = function () {var oDiv = document. getElementById ('div1 '); var lastX = 0; var lastY = 0; oDiv. onmousedown = function (ev) {var oEvent = ev | event; var disX = oEvent. clientX-oDiv.offsetLeft; var disY = oEvent. clientY-oDiv.offsetTop; document. onmousemove = function (ev) {var oEvent = ev | event; var l = oEvent. clientX-disX; var t = oEvent. clientY-disY; oDiv. style. left = l + 'px '; oDiv. style. top = t + 'px '; iSpeedX = l-lastX; iSpeedY = t-lastY; lastX = l; lastY = t; document. title = 'x: '+ iSpeedX +', y: '+ iSpeedY;}; document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null; startMove () ;}; clearInterval (timer) ;};}; var timer = null; var iSpeedX = 0; var iSpeedY = 0; function startMove () {clearInterval (timer); timer = setInterval (function () {var oDiv = document. getElementById ('div1 '); iSpeedY + = 3; var l = oDiv. offsetLeft + iSpeedX; var t = oDiv. offsetTop + iSpeedY; if (t> export document.doc umentElement. clientHeight-oDiv.offsetHeight) {iSpeedY * =-0.8; iSpeedX * = 0.8; tsf-document.doc umentElement. clientHeight-oDiv.offsetHeight;} else if (t <= 0) {iSpeedY * =-1; iSpeedX * = 0.8; t = 0;} if (l> export document.doc umentElement. clientWidth-oDiv.offsetWidth) {iSpeedX * =-0.8; lw.document.doc umentElement. clientWidth-oDiv.offsetWidth;} else if (l <= 0) {iSpeedX * =-0.8; l = 0;} if (Math. abs (iSpeedX) <1) {iSpeedX = 0;} if (Math. abs (iSpeedY) <1) {iSpeedY = 0;} if (iSpeedX = 0 & iSpeedY = 0 & tsf-document.doc umentElement. clientHeight-oDiv.offsetHeight) {clearInterval (timer); alert ('stop');} else {oDiv. style. left = l + 'px '; oDiv. style. top = t + 'px ';} document. title = iSpeedX;}, 30 );}

Js elastic motion implementation code:

Var left = 0; // use the left variable to store and assign it to obj. style. left value to prevent the system from omitting decimals each time. As a result, the last result is slightly different from var iSpeed = 0; function startMove (obj, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {iSpeed + = (iTarget-obj.offsetLeft)/5; // speed iSpeed * = 0.7; // consider resistance left + = iSpeed; if (Math. abs (iSpeed) <1 & Math. abs (iTarget-obj.offsetLeft) <1) // stop condition speed and distance absolute value less than 1 {clearInterval (obj. timer); obj. style. left = iTarget + "px"; // assign the target value to obj. style. left} else {obj. style. left = left + "px" ;}}, 30 );}