JavaScript拖拽、碰撞、重力及弹性运动实例分析
本文实例讲述了JavaScript拖拽、碰撞、重力及弹性运动实现方法。分享给大家供大家参考，具体如下：
js拖拽、碰撞与重力实现代码：
window.onload=function()
{
varoDiv=document.getElementById('div1');
varlastX=0;
varlastY=0;
oDiv.onmousedown=function(ev)
{
varoEvent=ev||event;
vardisX=oEvent.clientX-oDiv.offsetLeft;
vardisY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev)
{
varoEvent=ev||event;
varl=oEvent.clientX-disX;
vart=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);
};
};
vartimer=null;
variSpeedX=0;
variSpeedY=0;
functionstartMove()
{
clearInterval(timer);
timer=setInterval(function(){
varoDiv=document.getElementById('div1');
iSpeedY+=3;
varl=oDiv.offsetLeft+iSpeedX;
vart=oDiv.offsetTop+iSpeedY;
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
{
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
elseif(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;
}
elseif(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弹性运动实现代码：
varleft=0;//用left变量存储赋给obj.style.left的值，以防每次系统都省略小数，所导致最后结果的细微差异
variSpeed=0;
functionstartMove(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);
}
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。