自由落体是个加速的过程，让速度递加，再给速度个系数，减小速度即可
抛物线是在自由落体的前提下left也会变，速度，速度系数
js函数
//自由落体和抛物线运动
function fallMove(obj) {
var speed = 0;
var speedX = 10;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
speed += 3;
var T = obj.offsetTop + speed;
if(T > document.documentElement.clientHeight - obj.offsetHeight) {
T = document.documentElement.clientHeight - obj.offsetHeight;
speed *= -1;
speed *= 0.75;
speedX *= .75;
}
if(Math.abs(speed) <= 2 && Math.abs(T - (document.documentElement.clientHeight - obj.offsetHeight)) <= 1) {
clearInterval(obj.timer);
}
obj.style.top = T + ‘px‘;
obj.style.left = obj.offsetLeft + speedX + ‘px‘;
// console.log(obj.offsetLeft);
}, 30);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css">
#div1{width: 100px;height: 100px;background: red;position: absolute;top: 30px;left: 0;}
</style>
<script type="text/javascript" src="../js/rainbow.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
fallMove(oDiv);
}
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="自由落体" />
<div id="div1"></div>
</body>
</html>
时间： 2024-08-11 06:28:53