<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖拽 碰撞+重力运动</title>
<style>
#div1
{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var lastX = 0;
var lastY =0;
oDiv.onmousedown = function(ev){
var en = ev || event;
var disX = en.clientX - oDiv.offsetLeft;
var disY = en.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var e = ev || event;
var l = e.clientX - disX;
var t = e.clientY - disY;
oDiv.style.left = l +'px';
oDiv.style.top = t + 'px';
speedX = l - lastX;
speedY = t - lastY;
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
//开始运动
move();
}
//关闭定时器
clearInterval(timer);
}
}
//碰撞+重力 运动（计算空气阻力）
var timer = null;
//横向初速度
var speedX = 0;
//竖向初速度速度
var speedY = 0;
function move(){
clearInterval(timer);
timer = setInterval(function(){
var oDiv = document.getElementById("div1");
//类似重力加速度 : g = 3;
//竖向加速度:3
speedY+=3;
var l = oDiv.offsetLeft + speedX ;
var t = oDiv.offsetTop + speedY;
if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)
{
//竖向空气阻力
speedY*=-0.8;
//横向空气阻力
speedX*=0.8;
//将top设置为(document.documentElement.clientHeight - oDiv.offsetHeight)px
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
else if(t<=0)
{
//竖向空气阻力
speedY*=-0.8;
//横向空气阻力
speedX*=0.8;
//将top设置为0px
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
{
//横向空气阻力
speedX*=-0.8;
//将left设置为(document.documentElement.clientWidth - oDiv.offsetWidth)px
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
else if(l<=0)
{
//横向空气阻力
speedX*=-0.8;
//将left设置为0px
l = 0;
}
//将横向速度设置为0
if(Math.abs(speedX)<1)
{
speedX = 0;
}
//将竖向速度设置为0
if(Math.abs(speedY)<1)
{
speedY = 0;
}
//关闭定时器
//横、竖速度都为空及物体距顶部高度为(可视窗口高度 - 物体高度)
if(speedX==0 && speedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
{
clearInterval(timer);
}
else
{
oDiv.style.left = l+'px';
oDiv.style.top = t +'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">
</div>
<span style="width:1px;height:300px;background:black;left:300px"></span>
</body>
</html>
