JavaScript drag-and-drop, collision, gravity and elastic motion examples Analysis _javascript skills

In this paper, we illustrate the implementation of JavaScript drag-and-drop, collision, gravity and elastic motion. Share to everyone for your reference, specific as follows:

JS drag-and-drop, 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>=document.documentelement.clientheight-odiv.offsetheight) {ispeedy*=-0.8; Ispeedx*=0.8;
 T=document.documentelement.clientheight-odiv.offsetheight;
  else if (t<=0) {ispeedy*=-1;
  ispeedx*=0.8;
 t=0;
  } if (l>=document.documentelement.clientwidth-odiv.offsetwidth) {ispeedx*=-0.8;
 L=document.documentelement.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 && t==document.documentelement.clientheight-odiv.offsetheight) {ClearI
  Nterval (timer);
 Alert (' Stop ');
  else {odiv.style.left=l+ ' px ';
 odiv.style.top=t+ ' px ';
 } Document.title=ispeedx;
}, 30);

 }

JS Flexible Motion Implementation code:

var left=0; The left variable is used to store the value assigned to Obj.style.left, in case each system omits decimals, resulting in a subtle difference in the final result of
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"; After clear, assign the target value to Obj.style.left
  } 
  else
  {
   obj.style.left=left+ "px";
  }
 },30);

More about JavaScript motion effects to view the site topics: "JavaScript movement effect and Skills summary"

I hope this article will help you with JavaScript programming.