自己写的一个近似模拟太阳系行星运行的代码（更新CSS3代码在下方）
2014-02-14 13:42
435 查看
以前看到过一个很酷的网页，大概是一个模拟太阳系行星的运行，不记得是用HTML5还是CSS3还是JS了（好像都能实现。。。
）自己就尝试用Jquery写了一下，大概的轮廓是写出来了，以下的完整代码：
jquerty:
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>
）自己就尝试用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html+css3太阳系行星运转动画效果的实现代码
- 模拟申请账户，两次密码相同，用户名大于6位，密码不能为空判断，（这是一个布局框架，没有里面的运行代码）
- windows sdk编程系列文章 ---- 利用APC实现向一个运行中的进程注入自己的代码
- 向一个运行中的进程注入自己的代码
- [收藏] JavaScript 经典效果集 - 11.7更新大家欣赏,收藏完之后,别忘了留一个自己珍藏的好代码
- [收藏] JavaScript 经典效果集 - 11.7更新大家欣赏,收藏完之后,别忘了留一个自己珍藏的好代码
- [收藏] JavaScript 经典效果集 - 11.7更新大家欣赏,收藏完之后,别忘了留一个自己珍藏的好代码
- 如何调用一个程序，等待运行结束，并知晓程序运行成功与否：ShellExecuteEx；WaitForSingleObject；GetExitCodeProcess（C代码）
- Unix环境高级编程第三版中实例代码如何在自己的linux上运行的问题
- 自己模拟的一个简单的web服务器
- 分享一个DIV的css3艺术...因为打开比较慢所以无耻的放到自己的服务器了
- 写一个程序，统计自己C语言共写了多少行代码，Github基本操作
- 最近在写导出excel表格的代码,发现网上大部分代码都是导出简单格式的excel,所以自己顺便就写了一个导出复杂表格的工具类,有些代码是借鉴网友的,同时也谢谢分享代码的朋友们.
- c#中总是提示“在代码运行时或者在禁用“只要一个进程中断，就中断所有进程”选项时，不允许进行更改。
- python伪代码之爬取全国高校历年分数线运行代码持续更新:【内向即失败--王奕君】
- Github上更新自己Fork的代码
- 记录一个在SharePoint的代码中提升运行权限的方法
- 如何调用一个程序，等待运行结束，并知晓程序运行成功与否：ShellExecuteEx；WaitForSingleObject；GetExitCodeProcess（C代码）
- 自己做的一个游戏 先不要看程序 想玩的自己复制粘贴运行 不然就没意思了
- 只要两行代码，就能判断一个App是否在前台运行