<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{width:100px;height:100px;background:red;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var disX=0;
var disY=0;
var prevX=0;
var prevY=0;
var iSpeedX=0;//最后的X速度
var iSpeedY=0;//最后的Y速度
oDiv.onmousedown=function()
{
var ev=ev||event;
disX=ev.clientX-oDiv.offsetLeft;
disY=ev.clientY-oDiv.offsetTop;
prevX=ev.clientX;
prevY=ev.clientY;
document.onmousemove=function()
{
var ev=ev||event;
oDiv.style.left=ev.clientX-disX+"px";
oDiv.style.top=ev.clientY-disY+"px";
iSpeedX=ev.clientX-prevX;//获取最后一次移动的速度
iSpeedY=ev.clientY-prevY;
//制作时间差,重新获取
prevX=ev.clientX;
prevY=ev.clientY;
startMove(oDiv);
};
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
function startMove(obj)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
iSpeedY+=3;//这里是重力
var L=obj.offsetLeft+iSpeedX;
var T=obj.offsetTop+iSpeedY;
if(T>document.documentElement.clientHeight-obj.offsetHeight)
{
T=document.documentElement.clientHeight-obj.offsetHeight;
iSpeedY*=-1;
iSpeedY*=0.75;//摩擦力
iSpeedX*=0.75;//摩擦力
}
else if(T<0)
{
T=0;
iSpeedY*=-1;
iSpeedY*=0.75;//摩擦力
}
if(L>document.documentElement.clientWidth-obj.offsetWidth)
{
L=document.documentElement.clientWidth-obj.offsetWidth;
iSpeedX*=-1;
}
else if(L<0)
{
L=0;
iSpeedX*=-1;
}
obj.style.left=L+"px";
obj.style.top=T+"px";
},30)
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>碰撞运动
原文：http://blog.csdn.net/xiaomogg/article/details/45306821
