碰撞运动

时间：2015-04-27 11:20:26 阅读：137 评论：0 收藏：0 [点我收藏+]

标签：

<!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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行