<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
left:0;
top:0;
width:100px;
height:100px;
border-radius: 50%;
background: yellow;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var lastX = oDiv.offsetLeft;
var lastY = oDiv.offsetTop;
oDiv.onmousedown = function(e){
//点击就清除计时器，防止定时器未结束造成bug
clearInterval(this.timer);
var event = e || window.event;
var disX = event.clientX - this.offsetLeft;
var disY = event.clientY - this.offsetTop;
var that = this, iSpeedX, iSpeedY;
document.onmousemove = function (e){
var event = e || window.event;
var newLeft = event.clientX - disX;
var newTop = event.clientY- disY;
//最后释放的速度就是小球的初始速度=现在的距离-上一次的距离
iSpeedX = newLeft - lastX;
iSpeedY = newTop - lastY;
//更新上一次的距离
lastX = newLeft;
lastY = newTop;
that.style.left = newLeft + "px";
that.style.top = newTop + "px";
}
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
//释放后就开始运动
startMove(that,iSpeedX,iSpeedY);
}
}
function startMove(obj, iSpeedX, iSpeedY){
//每次都清除计时器，防止多次点击释放小球开启多个小球
clearInterval(obj.timer);
var g = 6;
obj.timer=setInterval(function(){
iSpeedY += g;
var newLeft=obj.offsetLeft + iSpeedX;
var newTop=obj.offsetTop + iSpeedY;
//判断碰撞
if(newTop >= document.documentElement.clientHeight - obj.offsetHeight){
iSpeedY *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.8;
newTop = document.documentElement.clientHeight-obj.offsetHeight;
}else if(newTop <= 0){
iSpeedY *= -1;
iSpeedY *= 0.8;
iSpeedX *=0.8;
newTop=0;
}
if(newLeft >= document.documentElement.clientWidth - obj.offsetWidth){
iSpeedX *= -1;
iSpeedY *= 0.8;
iSpeedX *=0.8;
newLeft = document.documentElement.clientWidth - obj.offsetWidth;
}else if(newLeft <= 0){
iSpeedX *= -1;
iSpeedY *= 0.8;
iSpeedX *=0.8;
newLeft=0;
}
// 速度范围再（-1，1）之后就会一直处于这个状态，可以直接判断清0
if(Math.abs(iSpeedX) < 1){
iSpeedX = 0;
}
if(Math.abs(iSpeedY) < 1){
iSpeedY = 0;
}
//水平垂直方向速度都为0，并且小球在屏幕最下方，再也没有能量运动，清除计时器
if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientTop-obj.offsetTop){
clearInterval(obj.timer);
}
obj.style.left=newLeft+"px";
obj.style.top=newTop+"px";
},30);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<m
阅读背景：
JavaScript模拟重力场_zoey的博客_javascript 重力
来源：互联网
分享到：
