JS原生之--圆周运动（转转转）

最新推荐文章于 2023-07-05 17:32:27 发布

玉米_欣

最新推荐文章于 2023-07-05 17:32:27 发布

阅读量2.1k

点赞数

分类专栏：前端 js 文章标签： html javascript 圆周运动椭圆运动三角函数的运用

本文链接：https://blog.csdn.net/u012967849/article/details/52618384

版权

前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四个小球椭圆运动</title>
		<style type="text/css">
			.ball{border-radius:50%;}
			.bg{margin:80px;width:550px;height:200px;border:1px solid #ccc;background:greenyellow;}
			.box{position: relative;margin:34px;}
		</style>
		<script>
			οnlοad=function(){
				var balls = document.getElementsByClassName("ball");
				for(var i =0;i<balls.length;i++){
					balls[i].deg = i *45; 	
				}
				var a = 300,b=100
				setInterval(function(){
					for(var i =0;i<balls.length;i++){
						balls[i].style.left = a *Math.cos(balls[i].deg *Math.PI /180) +a +"px";
						balls[i].style.top = b *Math.sin(balls[i].deg *Math.PI/180) +b +"px";	
						balls[i].deg+=2;
						balls[i].style.width = balls[i].style.height = balls[i].offsetTop /5 +30+"px";
					}	
				},20)
				
			}
		</script>
	</head>
	<body>
		<div class="box">
		<div class="ball" style="position: absolute; background: red; left:600px; top:0;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: blue; left:1200px; top:300px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: yellow; left:600px; top:600px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: black; left:0; top:300px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: orange; left:0; top:300px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: pink; left:0; top:300px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: deepskyblue; left:0; top:300px;  width: 30px; height: 30px; ">
		</div>
		<div class="ball" style="position: absolute; background: purple; left:0; top:300px;  width: 30px; height: 30px; ">
		</div>
		</div>
		<div class="bg"></div>
	</body>
</html>