<!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>
body{
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector("div");
oDiv.onmousedown = function (){
clearInterval(oDiv.timer);//当鼠标点击该元素时,可以让运动的小球停下来
var disX = event.pageX - oDiv.offsetLeft;
var disY = event.pageY - oDiv.offsetTop;
// 当鼠标只是落下并没有移动的时候,上一帧的位置和下一帧的位置相同,上一帧的时间戳和下一帧的时间戳也相同
var oL = event.pageX,nL = event.pageX,oT = event.pageY,nT = event.pageY,oTime = new Date().getTime(),nTime = new Date().getTime();
var chaX,chaY,chaT,speedX,speedY; //元素移动后,求出下一帧和上一帧之间的位置差,时间差。然后就能求出速度
document.onmousemove = function (){
chaX = event.pageX - oL;
chaY = event.pageY - oT;
chaT = new Date().getTime() - oTime;
// 当求出位置差和时间差之后,让上一步的位置等于这一步的位置(因为小球不是只运动一步就停了)
oL = event.pageX;
oT = event.pageY;
oTime = new Date().getTime();
var newLeft = event.pageX - disX;
var newTop = event.pageY - disY;
oDiv.style.left = newLeft + "px";
oDiv.style.top = newTop + "px";
}
document.onmouseup = function (){ //鼠标抬起的时候(即抛出去的时候),让带有惯性的小球继续运动
document.onmouseup = document.onmousemove = null;
// 1ms走的距离
speedX = chaX / chaT;
speedY = chaY / chaT;
oDiv.timer = setInterval(ballMove,25); //25ms走一次,所以25ms走一次的距离就是在speedX,speedY的基础上乘以25。
// oDiv.timer的作用:是能接住飞出去的小球。
function ballMove(){
// 小球会飞出页面
// oDiv.style.left=oDiv.offsetLeft+speedX*25 +"px"; //div接下来的运动==div目前的位置+惯性运动的距离
// oDiv.style.top=oDiv.offsetTop+speedY*25+"px";
// 小球不飞出页面的办法:获取下一步的位置,判断下一步的位置即可
var nextX = oDiv.offsetLeft + speedX*25;
if(nextX>=document.documentElement.clientWidth-oDiv.offsetWidth){
nextX = document.documentElement.clientWidth-oDiv.offsetWidth;
speedX = -speedX;
}else if(nextX<=0){
nextX = 0;
speedX = -speedX; //speedX取反,让小球相反的方向运动
}
var nextY = oDiv.offsetTop + speedY*25;
if(nextY>=document.documentElement.clientHeight-oDiv.offsetHeight){
nextY = document.documentElement.clientHeight-oDiv.offsetHeight;
speedY = -speedY;
}else if(nextY<=0){
nextY = 0;
speedY = -speedY;
}
oDiv.style.left = nextX + "px";
oDiv.style.top = nextY + "px";
}
}
}
// 分为三步:
// 1.实现拖拽效果
// 2.通过拖拽的最后一帧求出小球的速度,并在抬起鼠标的时候给它加一个循环计时器。
// 3.给元素增加一个范围,只能在窗口里移动,一旦到达窗口的时候,把它对应的速度做一个反弹
// 鼠标落下时关闭计时器
</script>
</body>
</html>
练习-带有惯性的小球运动
最新推荐文章于 2023-06-21 12:59:31 发布