自由落体是个加速的过程，让速度递加，再给速度个系数，减小速度即可
抛物线是在自由落体的前提下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>