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程序设计有所帮助。