自己写的一个近似模拟太阳系行星运行的代码（更新CSS3代码在下方）

最新推荐文章于 2022-09-24 12:08:13 发布

news2013

最新推荐文章于 2022-09-24 12:08:13 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lianglv123/article/details/19197561

本文介绍了作者使用Jquery尝试模拟太阳系行星运行的过程，指出了代码存在的问题，如行星速度不均匀及动画卡顿。随后，作者通过CSS3实现了更为简单的行星圆周运动，感叹其简便性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前看到过一个很酷的网页，大概是一个模拟太阳系行星的运行，不记得是用HTML5还是CSS3还是JS了（好像都能实现。。。）自己就尝试用Jquery写了一下，大概的轮廓是写出来了，以下的完整代码：

jquerty:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style type="text/css">
  #plg1{border:solid 1px;width:700px;height:700px;border-radius:700px;position:absolute;}
  #planet1{width:10px;height:10px;border-radius:10px;position:relative;background-color:red;}
  #plg2{border:solid 1px;width:600px;height:600px;border-radius:600px;position:relative;}
  #planet2{width:30px;height:30px;border-radius:30px;position:relative;background-color:blue;}
</style>
<script>
      $(document).ready(function(){
      var 
	winW=$(window),
	winH=$(window),
	plg1=$("#plg1"),
	planet1=$("#planet1"),
	plg2=$("#plg2"),
	planet2=$("#planet2"),
	text=$("#text");
	
	cssInit(plg1,planet1);
	cssInit(plg2,planet2);
	pStartCircle(planet1,plg1,5,40);
	pStartCircle(planet2,plg2,5,80);

	//初始化轨道和行星位置
	function cssInit(plg,planet){
		if(plg.width()==700){
      		plg.css({"left":winW.width()/2-plg.width()/2,
			"top":winW.height()/2-plg.height()/2});}
		else{
		plg.css({"top":plg.parent().height()/2-plg.height()/2,
      			    "left":plg.parent().width()/2-plg.width()/2})}
      		planet.css({"top":planet.parent().height()/2-planet.height()/2,
      			    "left":-planet.width()/2});
      	     }
	
	
	//行星运行入口函数
	function pStartCircle(planet,plg,d,t,text){
		var 
		a=parseFloat(plg.css("left"))+plg.width()/2,//轨道最左点X值
		b=parseFloat(plg.css("top"))+plg.height()/2,//轨道最上点X值
		r=plg.width()/2;//行星运行圆心(a,b),半径r
		h=parseFloat(planet.css("top")+planet.width()/2)//圆心top距离
		x=planet.css("left")-plg.css("left"),//行星的X坐标
		value=1;//标识符，用于判断运行方向（Y轴正负）
		pCircle(planet,plg,d,t,r,a,b,h,value);
	}
	
	//行星运行算法 d:t:
	function pCircle(planet,plg,d,t,r,a,b,h,value){
		if(value==1){
			planet.css("left","+="+d);
			var x=parseFloat(planet.css("left"))+planet.width()/2;//行星的X坐标
			planet.css("top",(h-Math.sqrt(Math.abs(r*r-(x-r)*(x-r)))));
			if(x==plg.width())value=0;
			if(x==0)value=1;
		}else{
			planet.css("left","-="+d);
			var x=parseFloat(planet.css("left"))+planet.width()/2;//行星的X坐标
			planet.css("top",(h+Math.sqrt(Math.abs(r*r-(x-r)*(x-r)))));
			if(x==plg.width())value=0;
			if(x==0)value=1;
		}
		setTimeout(function (planet,plg,d,t,r,a,b,h,value) {
			return function () { pCircle(planet,plg,d,t,r,a,b,h,value); };
			 }(planet,plg,d,t,r,a,b,h,value),t);
	}
	
      })

</script>
</head>
<body >
<div id="text" ></div>
<!--最外层的行星轨道-->
<div id="plg1">
	<!--行星1 最外层的行星-->
	<div id="planet1"></div>
	<!--第二层的行星轨道-->
	<div id="plg2">
		<!--行星2 第二层的行星-->
		<div id="planet2"></div>
	</div>
</div>

</body>
</html>

没有把所有东西都实现，但主要的算法函数什么的已经做好，发现几个问题

1：行星运行的速度不是匀速，运行到轨道两边会加快

2：如果等待时间（t）设置长的话，行星动起来感觉一卡一卡的，没有连贯感

自己实现了自己的想法，还是有点小开心的，虽然感觉不完美。。。。

后面又尝试用CSS3做了一次，发现何其简单。。。。一直都想着怎么让行星在轨道上做圆周运动，各种算法各种公式，后面发现原来只要把行星放置在对应轨道上，然后让轨道自己旋转就好了。。。太无耻了~~有一种一拳打在棉花上的感觉

以下是CSS3代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
	body{background-color:black}
	.gd{border:solid 1px gray;border-radius:800px;top:50%;left:50%;position:absolute;}
	.planet{border-radius:38px;position:relative;}
	
	#NeptuneGD{width:800px;height:800px;margin-left:-400px;margin-top:-400px;
	-webkit-animation:myfirst 50s linear 0s infinite;}
	#Neptune{width:25px;height:25px;background-color:#CA25C4;top:400px;margin:-12.5px;}

	#UranusGD{width:700px;height:700px;margin-left:-350px;margin-top:-350px;
	-webkit-animation:myfirst 70s linear 0s infinite;}
	#Uranus{width:30px;height:30px;background-color:#298546;top:350px;margin:-15px;}

	#SaturnGD{width:600px;height:600px;margin-left:-300px;margin-top:-300px;
	-webkit-animation:myfirst 60s linear 0s infinite;}
	#Saturn{width:35px;height:35px;background-color:#70351D;top:300px;margin:-17.5px;}

	#JupiterGD{width:500px;height:500px;margin-left:-250px;margin-top:-250px;
	-webkit-animation:myfirst 40s linear 0s infinite;}
	#Jupiter{width:40px;height:40px;background-color:#A2A05F;top:250px;margin:-20px;}

	#MarsGD{width:400px;height:400px;margin-left:-200px;margin-top:-200px;
	-webkit-animation:myfirst 30s linear 0s infinite;}
	#Mars{width:10px;height:10px;background-color:#EB7D0E;top:200px;margin:-5px;}

	#EarthGD{width:300px;height:300px;margin-left:-150px;margin-top:-150px;
	-webkit-animation:myfirst 35s linear 0s infinite;}
	#Earth{width:20px;height:20px;background-color:#0E49EB;top:150px;margin:-10px;}

	#VenusGD{width:200px;height:200px;margin-left:-100px;margin-top:-100px;
	-webkit-animation:myfirst 20s linear 0s infinite;}
	#Venus{width:15px;height:15px;background-color:#F9F106;top:100px;margin:-7.5px;}

	#MercuryGD{width:100px;height:100px;margin-left:-50px;margin-top:-50px;
	-webkit-animation:myfirst 80s linear 0s infinite;}
	#Mercury{width:5px;height:5px;background-color:#06B8F9;top:50px;margin:-2.5px;}
	
	#sun{width:50px;height:50px;border-radius:50px;background-color:red;
	top:50%;left:50%;position:absolute;margin-left:-25px;margin-top:-25px;}

	@-webkit-keyframes myfirst{
		from{-webkit-transform:rotate(0deg);}
		to{-webkit-transform:rotate(360deg);}
	}
  </style>
  <script>
	
	
  </script>
  <title>Document</title>
 </head>
 <body >
  <div id="NeptuneGD" class="gd">
	<div id="Neptune" class="planet"></div>
  </div>
  <div id="UranusGD" class="gd">
	<div id="Uranus" class="planet"></div>
  </div>
  <div id="SaturnGD" class="gd">
	<div id="Saturn" class="planet"></div>
  </div>
  <div id="JupiterGD" class="gd">
	<div id="Jupiter" class="planet"></div>
  </div>
  <div id="MarsGD" class="gd">
	<div id="Mars" class="planet"></div>
  </div>
  <div id="EarthGD" class="gd">
	<div id="Earth" class="planet"></div>
  </div>
  <div id="VenusGD" class="gd">
	<div id="Venus" class="planet"></div>
  </div>
  <div id="MercuryGD" class="gd">
	<div id="Mercury" class="planet"></div>
  </div>
  <div id="sun"></div>
 </body>
</html>