这次给大家带来js做出抛物线运动轨迹，js做出抛物线运动轨迹的注意事项有哪些，下面就是实战案例，一起来看一下。
具体代码如下：
<!doctype html >
<html>
<head>
<meta charset="utf-8"/>
<title>抛物线运动</title>
<style>
.pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;}
.pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;}
</style>
<script>
test = function(){
var rect = document.getelementbyid(rect);
pwx(rect,60,5); //参数2：抛物线角度，参数3：横向速度每次增加5
}
function pwx(rect,radian,step){
var animate = function(opt){
var cos = math.cos(opt.radian*math.pi/180);//邻边比斜边,60度的话等于1/2
var sin = math.sin(opt.radian*math.pi/180);//对边比斜边,30度的话等于1/2
var left = opt.rect.offsetleft;
var top = opt.rect.offsettop;
if(opt.radian>0){
left+=opt.step;
opt.radian-=1; //角度递减1
var a = left - opt.initleft;
var c = (a/cos);
var b = (sin*c);
opt.rect.style.left = opt.initleft+a+px;
opt.rect.style.top = opt.inittop-b+px;
settimeout(function(){
animate(opt);
},10);
}else{
opt.rect.style.left = left+opt.step+px;
opt.rect.style.top = opt.inittop+px;
}
}
animate({
step : step,
rect : rect,
radian : radian,
inittop : rect.offsettop,
initleft : rect.offsetleft
});
}
</script>
</head>
<body>
www.jb51.net
<input type="button" value="抛物线" onclick="test()"/>
<p class="pwx_rect" id="rect"></p>
<p class="pwx_hr"></p>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js提示文本框邮箱地址补全
vue的项目结构须知
以上就是js做出抛物线运动轨迹的详细内容。