首页 > 代码库 > 自由落体和抛物线运动
自由落体和抛物线运动
自由落体是个加速的过程,让速度递加,再给速度个系数,减小速度即可
抛物线是在自由落体的前提下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>
自由落体和抛物线运动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。