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

本文链接：https://blog.csdn.net/lianglv123/article/details/19197561

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

摘要由CSDN通过智能技术生成

以前看到过一个很酷的网页，大概是一个模拟太阳系行星的运行，不记得是用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(