JavaScript拖拽、碰撞、重力及彈性運動實例分析

更新時間：2016年01月08日 10:37:34 作者：leo列

這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運動實現(xiàn)方法,涉及JavaScript數(shù)學運算結(jié)合時間函數(shù)實現(xiàn)運動效果的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JavaScript拖拽、碰撞、重力及彈性運動實現(xiàn)方法。分享給大家供大家參考，具體如下：

js拖拽、碰撞與重力實現(xiàn)代碼：

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彈性運動實現(xiàn)代碼：

var left=0; //用left變量存儲賦給obj.style.left的值，以防每次系統(tǒng)都省略小數(shù)，所導致最后結(jié)果的細微差異
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);
}

更多關(guān)于JavaScript運動效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運動效果與技巧匯總》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: