JS实现抛物线运动_js 实现抛物线-CSDN博客

本文链接：https://blog.csdn.net/zhuolei123/article/details/8582225

<!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>
	<input type="button" value="抛物线" οnclick="test()"/>
	<div class="pwx_rect" id="rect"></div>
	<div class="pwx_hr"></div>
</body>
</html>

实现思路：