<!DOCTYPE html>
<html lang="en">
<!--
________ ___ __ __ _
/_ __/ / ___ / _ \/ /__ ____ ___ / /____ _____(_)_ ____ _
/ / / _ \/ -_) / ___/ / _ `/ _ \/ -_) __/ _ `/ __/ / // / ' \
/_/ /_//_/\__/ /_/ /_/\_,_/_//_/\__/\__/\_,_/_/ /_/\_,_/_/_/_/
An (HTML5 + CSS3 + SVG) x JS experiment
Created by Little Workshop http://www.littleworkshop.fr
* Libraries used: jQuery, Raphaël, RequireJS
* Supported in Firefox 4, Chrome, Safari
* Check out the source on GitHub: http://github.com/littleworkshop/planetarium
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=800">
<style>html {overflow: hidden;}</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
<style>
.hidden { display:none; }
#spinner {position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-25px;height:50px;width:50px;background:url('img/spinner.gif') no-repeat;}
</style>
<title>The Planetarium</title>
</head>
<body class="system">
<div id="starfield">
</div>
<div id="spinner"></div>
<img id="glow" src="img/glow.png">
<div id="title">
<h1 class="franchise"><span class="marketing">The</span>Planetarium</h1>
<span id="subtitle" class="carto">An HTML5 Astronomical Adventure</span>
</div>
<div id="instructions" class="carto loading">
click on a planet to start
</div>
<div id="toggle-credits" class="loading">
<span class="marketing">view credits</span>
</div>
<section id="credits">
<span id="madeby" class="carto">Made on Earth by <a href="http://www.littleworkshop.fr/" target="_blank" title="Visit Little Workshop">Little Workshop</a></span>
<div id="door">
<div></div>
<div></div>
</div>
<div id="doorlight">
<div></div>
<div></div>
</div>
<div id="authors">
<p id="guillaume">
<span class="marketing">design by</span>
<span class="bebas">Guillaume Lecollinet</span>
<span class="carto"><a target="_blank" href="http://twitter.com/glecollinet/" title="follow Guillaume on Twitter">@glecollinet</a></span>
</p>
<p id="franck">
<span class="marketing">code by</span>
<span class="bebas">Franck Lecollinet</span>
<span class="carto"><a target="_blank" href="http://twitter.com/whatthefranck/" title="follow Franck on Twitter">@whatthefranck</a></span>
</p>
</div>
<section id="typefaces">
<header>
<span class="separator"></span>
<span id="title-hr" class="marketing">typefaces</span>
<span class="separator"></span>
</header>
<ul>
<li class="carto">Marketing Script <br/><span>by</span> <a href="http://www.steffmann.de/" target="_blank" title="Dieter Steffmann">Dieter Steffmann</a></li>
<li class="carto">Franchise <br/><span>by</span> <a href="http://www.derekweathersbee.com/" target="_blank" title="Derek Weathersbee">Derek Weathersbee</a></li>
<li class="carto">Bebas <br/><span>by</span> <a href="http://dharmatype.com/flat-it" target="_blank" title="Flat-it Type Foundry">Flat-it</a></li>
<li class="carto">CartoGothic Std <br/><span>by</span> <a href="http://www.fontsite.com/" target="_blank" title="FontSite Inc.">FontSite Inc.</a></li>
</ul>
</section>
</section>
<ul id="planets" class="loading">
<li id="mercury" class="planet"></li>
<li id="venus" class="planet"></li>
<li id="earth" class="planet"></li>
<li id="mars" class="planet"></li>
<li id="jupiter" class="planet"></li>
<li id="saturn" class="planet"></li>
<li id="uranus" class="planet"></li>
<li id="neptune" class="planet"></li>
</ul>
<div id="gui" class="shrink">
<div id="container"></div>
<div id="ruler">
</div>
<div id="counter">
<span class="carto">DISTANCE FROM THE SUN</span><br />
<span id="kilometers" class="bebas"></span>
</div>
<div id="back">
<span class="carto">Back to space</span>
</div>
<div id="moveleft">
<div id="previous">
<img src="img/previous.svg" type="image/svg+xml" alt="Previous planet">
</div>
</div>
<div id="moveright">
<div id="next">
<img src="img/previous.svg" type="image/svg+xml" alt="Next planet">
</div>
</div>
<section class="content hidden" id="mercury-info">
<article id="mercury-window" class="window">
<div class="reflect">
<h1 class="bebas">
Mercury
</h1>
<p class="carto">is the first planet from the Sun and is also the smallest and densest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system.</p>
</div>
</article>
<div id="mercury-missions">
<h2 class="bebas">Mercury Observation Progress</h2>
<ul>
<li><img src="img/mercuryobs1.png" alt=""></li>
<li><img src="img/mercuryobs2.png" alt=""></li>
<li><img src="img/mercuryobs3.png" alt=""></li>
</ul>
<img id="mariner10" src="img/mariner10.png" alt="">
<img id="techarrow" src="img/30years.png" alt="">
<img id="messenger" src="img/messenger.png" alt="">
</div>
</section>
<section class="content hidden" id="venus-info">
<article id="venus-window" class="window">
<div class="reflect">
<h1 class="bebas">
Venus
</h1>
<p>is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar System.</p>
</div>
</article>
<ul id="venus-atmosphere" class="bebas">
<li>65 KM
<span>-100°C</span>
<span>Sulfuric Acid Cloud Layers</span>
</li>
<li>50 KM
<span>0°C</span>
<span>Sulfuric Acid Haze</span>
</li>
<li>38 KM
<span>25°C</span>
<span>Troposphere</span>
</li>
<li>0 KM
<span>467°C</span>
<span>Surface Level</span>
</li>
</ul>
</section>
<section class="content hidden" id="earth-info">
<article id="earth-window" class="window">
<div class="reflect">
<h1 class="bebas">
Earth
</h1>
<p>is the third planet from the Sun, and the densest and fifth-largest of the eight planets in the Solar System. Sometimes referred to as the Blue Planet, Earth is the only known planet to harbor life.</p>
</div>
</article>
<div id="earth-moon" class="grid moon">
<img id="distance" src="img/distance.png" alt="">
</div>
<ul id="earth-facts" class="properties bebas">
<li class="mass">
<img src="img/mass.svg" alt="mass">
5.9736 <small>x</small> 10<span class="exposant">24</span> kg
<span>That's 80 times the mass of the moon</span>
</li>
<li class="perimeter">
<img src="img/perimeter.svg" alt="perimeter">
40,075,16 km
<span>Equatorial circumference</span>
</li>
<li class="revolution">
<img src="img/revolution.svg" alt="revolution">
365 days
<span>Complete Orbital Period</span>
</li>
<li class="temperature">
<img src="img/temperature.svg" alt="temperature">
-89.2°C to 57.8°C
<span>Temperature range</span>
</li>
</ul>
</section>
<section class="content hidden" id="mars-info">
<article id="mars-window" class="window">
<div class="reflect">
<h1 class="bebas">
Mars
</h1>
<p>is the fourth planet from the Sun. Named after the Roman god of war, Mars is often described as the "Red Planet" and is the site of Olympus Mons, the highest known mountain in the Solar System.</p>
</div>
</article>
<ul id="volcanoes" class="bebas">
<li>Olympus Mons<span>27,000 KM</span><hr /></li>
<li>Mount Everest<span>8,848 KM</span><hr /></li>
<li>Mount Fuji<span>3,776 KM</span><hr /></li>
</ul>
</section>
<section class="content hidden" id="jupiter-info">
<article id="jupiter-window" class="window">
<div class="reflect">
<h1 class="bebas">
Jupiter
</h
HTML5开发的太阳系演示
5星 · 超过95%的资源 需积分: 13 118 浏览量
2012-05-14
22:33:06
上传
评论 1
收藏 838KB ZIP 举报 
demo_package.zip （58个子文件） 
css 
style.css 38KB img 
glow.png 29KB saturn-arrow2.png 1KB
perimeter.svg 743B satellite.png 2KB
earth.jpg 77KB 30years.png 2KB uranus.png 93KB time.png 2KB mercuryobs2.png 3KB revolution.svg 1KB previous.svg 631B grid.png 1KB mercuryobs3.png 3KB mars.jpg 46KB messenger.png 5KB 246min.png 3KB everest.png 4KB ruler.png 1KB iopicto.png 2KB
spinner.gif 3KB saturn-arrow3.png 2KB distance.png 3KB jupiter.jpg 45KB wind.png 2KB rings1.png 4KB saturn.png 105KB saturn-arrow1.png 1KB venus.jpg 72KB mariner10.png 6KB mercury.jpg 69KB rings3.png 4KB tilt.png 4KB mercuryobs1.png 2KB earthicon.png 6KB neptune.jpg 18KB astronauts.png 6KB venussurface.png 4KB bg.jpg 17KB europapicto.png 2KB mass.svg 1KB voyager2.png 8KB temperature.svg 1KB rings2.png 5KB reflect.png 15KB ganymedepicto.png 2KB olympus.png 9KB fuji.png 2KB doorlight.png 4KB callistopicto.png 2KB fonts Franchise-Bold.ttf 34KB CartoGothicStd-Book-webfont.woff 26KB MarketingScript.ttf 54KB BEBAS___-webfont.ttf 15KB CartoGothicStd-Book-webfont.ttf 47KB
index.html 12KB js main.min.js 77KB require-jquery-1.4.4.min.js 89KB
评论2
最新资源