首页 / 脚本样式 / JavaScript / JavaScript拖拽、碰撞、重力及弹性运动实例分析

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）;}

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）;}