重力回弹 好玩的小随笔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cont{
width: 1000px;
height: 600px;
background: #eee;
margin: 20px auto;
position: relative;
}
.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}
</style>
</head>
<body>
<div class="cont">
<div class="box"></div>
</div>
</body>
<script type="text/javascript">
var obox = document.querySelector(".box");
var ocont = document.querySelector(".cont");
var speed = 10; //步长
var target = ocont.clientHeight - obox.offsetHeight; //目标
var g = 2; //重力
var timer; //计时器
document.onclick = function(){
// 点击之前先清除,上一次
clearInterval(timer)
timer = setInterval(()=>{
// 重力加速
speed += g;
// 判断是否到重点
if(speed >= target-obox.offsetTop){
// 强行确认到重点
obox.style.top = target + "px";
// 回弹，回弹损耗
speed = -parseInt(speed*0.8);
// console.log(speed)
// 当回弹不足1的时候,意味着不再弹起了,就可以清除计时器了
if(Math.abs(speed) < 1){
clearInterval(timer)
obox.style.top = target + "px";
}
}else{
// 生效位置
obox.style.top = obox.offsetTop + speed + "px";
}
},30) //频率
}
</script>
</html>
