Beispiele für JavaScript-Ziehen, Kollision, Schwerkraft und elastische Bewegung, Analyse_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben die Implementierungsmethoden von JavaScript-Drag, Kollision, Schwerkraft und elastischer Bewegung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JS-Implementierungscode für Drag, Kollision und Schwerkraft:

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)
 {
  clearInterval(timer);
  alert('停止');
 }
 else
 {
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
 }
 document.title=iSpeedX;
 }, 30);
}

js Elastic Motion-Implementierungscode:

var left=0; //用left变量存储赋给obj.style.left的值，以防每次系统都省略小数，所导致最后结果的细微差异
var iSpeed=0;
function startMove(obj,iTarget)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5; //速度
  iSpeed*=0.7; //考虑阻力
  left+=iSpeed;
  if(Math.abs(iSpeed)<1&&Math.abs(iTarget-obj.offsetLeft)<1) //停止条件 速度和距离绝对值小于1
  {
   clearInterval(obj.timer);
   obj.style.left=iTarget+"px"; //清楚后，顺便把目标值赋给obj.style.left
  } 
  else
  {
   obj.style.left=left+"px";
  }
 },30);
}

Weitere Inhalte zu JavaScript-Bewegungseffekten finden Sie im Sonderthema auf dieser Website: „Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.