Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dbc66b6

Browse files
Added Solar System Code
0 parents commit dbc66b6

File tree

4 files changed

+2135
-0
lines changed

4 files changed

+2135
-0
lines changed

‎Solay_System_3D/Images/3D-1.png

1.11 MB
Loading[フレーム]

‎Solay_System_3D/index.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>3D Solar System using HTML CSS and JavaScript</title>
8+
</head>
9+
<body>
10+
<div class="opening hide-UI view-2D zoom-large data-close controls-close">
11+
<div id="navbar">
12+
<a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a>
13+
<h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank" rel="noopener">@JulianGarnier</a></span></h1>
14+
<a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a>
15+
</div>
16+
<div id="data">
17+
<a class="sun" title="Sun" href="#sunspeed">Sun</a>
18+
<a class="mercury" title="Mercury" href="#mercuryspeed">Mercury</a>
19+
<a class="venus" title="Venus" href="#venusspeed">Venus</a>
20+
<a class="earth active" title="Earth" href="#earthspeed">Earth</a>
21+
<a class="mars" title="Mars" href="#marsspeed">Mars</a>
22+
<a class="jupiter" title="Jupiter" href="#jupiterspeed">Jupiter</a>
23+
<a class="saturn" title="Saturn" href="#saturnspeed">Saturn</a>
24+
<a class="uranus" title="Uranus" href="#uranusspeed">Uranus</a>
25+
<a class="neptune" title="Neptune" href="#neptunespeed">Neptune</a>
26+
</div>
27+
<div id="controls">
28+
<label class="set-view">
29+
<input type="checkbox" id="view-checkbox">
30+
View
31+
</label>
32+
<label class="set-zoom">
33+
<input type="checkbox" id="zoom-checkbox">
34+
Zoom
35+
</label>
36+
<label>
37+
<input type="radio" class="set-speed" name="scale" id="speed-radio" checked>
38+
<span>Speed</span>
39+
</label>
40+
<label>
41+
<input type="radio" class="set-size" name="scale" id="size-radio">
42+
<span>Size</span>
43+
</label>
44+
<label>
45+
<input type="radio" class="set-distance" name="scale" id="distance-radio">
46+
<span>Distance</span>
47+
</label>
48+
</div>
49+
<div id="universe" class="scale-stretched">
50+
<div id="galaxy">
51+
<div id="solar-system" class="earth">
52+
<div id="mercury" class="orbit">
53+
<div class="pos">
54+
<div class="planet">
55+
<dl class="infos">
56+
<dt>Mercury</dt>
57+
<dd><span></span></dd>
58+
</dl>
59+
</div>
60+
</div>
61+
</div>
62+
<div id="venus" class="orbit">
63+
<div class="pos">
64+
<div class="planet">
65+
<dl class="infos">
66+
<dt>Venus</dt>
67+
<dd><span></span></dd>
68+
</dl>
69+
</div>
70+
</div>
71+
</div>
72+
<div id="earth" class "orbit">
73+
<div class="pos">
74+
<div class="orbit">
75+
<div class="pos">
76+
<div class="moon"></div>
77+
</div>
78+
</div>
79+
<div class="planet">
80+
<dl class="infos">
81+
<dt>Earth</dt>
82+
<dd><span></span></dd>
83+
</dl>
84+
</div>
85+
</div>
86+
</div>
87+
<div id="mars" class="orbit">
88+
<div class="pos">
89+
<div class="planet">
90+
<dl class="infos">
91+
<dt>Mars</dt>
92+
<dd><span></span></dd>
93+
</dl>
94+
</div>
95+
</div>
96+
</div>
97+
<div id="jupiter" class="orbit">
98+
<div class="pos">
99+
<div class="planet">
100+
<dl class="infos">
101+
<dt>Jupiter</dt>
102+
<dd><span></span></dd>
103+
</dl>
104+
</div>
105+
</div>
106+
</div>
107+
<div id="saturn" class="orbit">
108+
<div class="pos">
109+
<div class="planet">
110+
<div class="ring"></div>
111+
<dl class="infos">
112+
<dt>Saturn</dt>
113+
<dd><span></span></dd>
114+
</dl>
115+
</div>
116+
</div>
117+
</div>
118+
<div id="uranus" class="orbit">
119+
<div class="pos">
120+
<div class="planet">
121+
<dl class="infos">
122+
<dt>Uranus</dt>
123+
<dd><span></span></dd>
124+
</dl>
125+
</div>
126+
</div>
127+
</div>
128+
<div id="neptune" class="orbit">
129+
<div class="pos">
130+
<div class="planet">
131+
<dl class="infos">
132+
<dt>Neptune</dt>
133+
<dd><span></span></dd>
134+
</dl>
135+
</div>
136+
</div>
137+
</div>
138+
<div id="sun">
139+
<dl class="infos">
140+
<dt>Sun</dt>
141+
<dd><span></span

‎Solay_System_3D/script.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
$(window).load(function () {
2+
3+
var body = $("body"),
4+
universe = $("#universe"),
5+
solarsys = $("#solar-system");
6+
7+
var init = function () {
8+
body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function () {
9+
$(this).removeClass('hide-UI').addClass("set-speed");
10+
$(this).dequeue();
11+
});
12+
};
13+
14+
var setView = function (view) { universe.removeClass().addClass(view); };
15+
16+
$("#toggle-data").click(function (e) {
17+
body.toggleClass("data-open data-close");
18+
e.preventDefault();
19+
});
20+
21+
$("#toggle-controls").click(function (e) {
22+
body.toggleClass("controls-open controls-close");
23+
e.preventDefault();
24+
});
25+
26+
$("#data a").click(function (e) {
27+
var ref = $(this).attr("class");
28+
solarsys.removeClass().addClass(ref);
29+
$(this).parent().find('a').removeClass('active');
30+
$(this).addClass('active');
31+
e.preventDefault();
32+
});
33+
34+
$(".set-view").click(function () { body.toggleClass("view-3D view-2D"); });
35+
$(".set-zoom").click(function () { body.toggleClass("zoom-large zoom-close"); });
36+
$(".set-speed").click(function () { setView("scale-stretched set-speed"); });
37+
$(".set-size").click(function () { setView("scale-s set-size"); });
38+
$(".set-distance").click(function () { setView("scale-d set-distance"); });
39+
40+
init();
41+
42+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /