index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>solar system</title>
  5. <script type="text/javascript" src="/js/jquery.min.js"></script>
  6. <link rel="stylesheet" href="/css/bootstrap.min.css">
  7. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  8. <link rel="stylesheet" href="/css/style.css">
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  12. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <link href="./style.css" rel="stylesheet" type="text/css">
  14. </head>
  15. <body>
  16. <div id="introwrap" style="position:relative;color:white;top:100px;left:10px">
  17. <p><a class="btn btn-info" href="/fun" style="background:#000"><span
  18. class="glyphicon glyphicon-home"></span>&nbsp;返回</a></p>
  19. <br>
  20. <p>你好,向后翻吧 <i class="glyphicon glyphicon-arrow-right"></i></p>
  21. <p>1 像素 = 3474.8km = 月亮的直径</p>
  22. <p>累了的话,试试鼠标中键。</p>
  23. </div>
  24. </div>
  25. <div id="bigspace">
  26. <div class="planetwrapper">
  27. <div id="sunwrap">
  28. <svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg"
  29. xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px"
  30. viewBox="0 0 10 10">
  31. <circle cx="5" cy="5" r="5"></circle>
  32. </svg>
  33. <div id="suntxt" class="labeltext">太阳</div>
  34. </div>
  35. <svg version="1.1" id="mercury" xmlns="http://www.w3.org/2000/svg"
  36. xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px"
  37. viewBox="0 0 10 10">
  38. <circle cx="5" cy="5" r="5"></circle>
  39. </svg>
  40. <div id="merctxt" class="labeltext">
  41. <img src="./arrow.svg"><br>
  42. <span id="merclabel">水星</span><br>
  43. </div>
  44. <svg version="1.1" id="venus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  45. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  46. <circle cx="5" cy="5" r="5"></circle>
  47. </svg>
  48. <div id="venustxt" class="labeltext">
  49. <img src="./arrow.svg"><br>
  50. <span id="venuslabel">金星</span>
  51. </div>
  52. <svg version="1.1" id="earth" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  53. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  54. <circle cx="5" cy="5" r="5"></circle>
  55. </svg>
  56. <div id="earthtxt" class="labeltext">
  57. <img src="./arrow.svg"><br>
  58. <span id="earthlabel">地球</span><br>
  59. <div id="you-are-here" style="font-size:.3em; color:#737373">(你在这)</div>
  60. </div>
  61. <div id="moontxt" class="labeltext">
  62. <span id="moonlabel">月球</span><br>
  63. <img src="./arrow2.svg">
  64. </div>
  65. <svg version="1.1" id="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  66. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  67. <circle cx="5" cy="5" r="5"></circle>
  68. </svg>
  69. <svg version="1.1" id="mars" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  70. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  71. <circle cx="5" cy="5" r="5"></circle>
  72. </svg>
  73. <div id="marstxt" class="labeltext">
  74. <img src="./arrow.svg"><br>
  75. <span id="marslabel">火星</span>
  76. </div>
  77. <svg version="1.1" id="jupiter" xmlns="http://www.w3.org/2000/svg"
  78. xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px"
  79. viewBox="0 0 10 10">
  80. <circle cx="5" cy="5" r="5"></circle>
  81. </svg>
  82. <div id="jupitertxt" class="labeltext">
  83. <img src="./arrow.svg" style="margin-left:15px"><br>
  84. <span id="jupiterlabel">木星</span>
  85. </div>
  86. <div id="jupitermoons" class="labeltext">
  87. <span id="io"><img src="./moondot.png" height="1px" width="1px" class="moondot"><span
  88. id="iolabel">木卫一</span></span>
  89. <span id="europa"><img src="./moondot.png" height="1px" width="1px" class="moondot"><span
  90. id="europalabel">木卫二</span></span>
  91. <span id="ganymede"><img src="./moondot.png" height="2px" width="2px" class="moondot"><span
  92. id="ganymedelabel">木卫三</span></span>
  93. <span id="callisto"><img src="./moondot.png" height="1px" width="1px" class="moondot"><span
  94. id="callistolabel">木卫四</span></span>
  95. </div>
  96. <img src="./saturn.svg" id="saturn"><br>
  97. <div id="saturntxt" class="labeltext">
  98. <img src="./arrow.svg"><br>
  99. <span id="saturnlabel">土星</span>
  100. </div>
  101. <div id="saturnmoons" class="labeltext">
  102. <span id="titan"><img src="./moondot.png" height="1px" width="1px" class="moondot"><span
  103. id="titanlabel">土卫六</span></span>
  104. </div>
  105. <svg version="1.1" id="uranus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  106. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  107. <circle cx="5" cy="5" r="5"></circle>
  108. </svg>
  109. <div id="uranustxt" class="labeltext">
  110. <img src="./arrow.svg"><br>
  111. <span id="uranuslabel">天王星</span>
  112. </div>
  113. <svg version="1.1" id="neptune" xmlns="http://www.w3.org/2000/svg"
  114. xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px"
  115. viewBox="0 0 10 10">
  116. <circle cx="5" cy="5" r="5"></circle>
  117. </svg>
  118. <div id="neptunetxt" class="labeltext">
  119. <img src="./arrow.svg"><br>
  120. <span id="neptunelabel">海王星</span>
  121. </div>
  122. <svg version="1.1" id="pluto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  123. x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10">
  124. <circle cx="5" cy="5" r="5"></circle>
  125. </svg>
  126. <div id="plutotxt" class="labeltext">
  127. <img src="./arrow.svg"><br>
  128. <span id="plutolabel">冥王星</span><span style="font-size:.25em"><br></span>
  129. <span id="we-still-love" style="font-size:.25em; text-transform:none">(我们依然爱你)</span>
  130. </div>
  131. <div class="essay l10n" style="left:2885px">我们刚走过了一千万公里(6,213,710英里)</div>
  132. <div class="essay" style="left:8275px">这里挺空的。</div>
  133. <div class="essay" style="left:13666px">第一颗行星就要来啦。</div>
  134. <div class="essay" style="left:20666px">原来,一切都这么遥远。</div>
  135. <div class="essay" style="left:26666px">坐稳了,下一个行星就要来了。</div>
  136. <div class="essay" style="left:33666px">大部分空间只是空荡荡的。</div>
  137. <div class="essay" style="left:37100px">快到家啦。</div>
  138. <div class="essay" style="left:48200px">目的地:火星!</div>
  139. <div class="essay" style="left:55100px"><span id="it-would-take">坐宇宙飞船飞到火星都要花七个月时间。</span><span
  140. style="margin-left:100px">&nbsp;</span><span id="better-be-some">最好有点好玩的机上娱乐活动。</span>
  141. <span style="margin-left:100px">&nbsp;</span><span
  142. id="in-case-youre">如果你想知道:你需要看大概2000部电影长片才能消磨掉旅途中醒着的时光。</span>
  143. </div>
  144. <div class="essay" style="left:67100px">从这里到木星的距离是我们已经走过距离的三倍。</div>
  145. <div class="essay" style="left:80038px">我们啥时候能到?</div>
  146. <div class="essay" style="left:100038px">说真的,我们啥时候能到木星?</div>
  147. <div class="essay" style="left:120038px"><span id="this-is-where">这里本应有些小行星让我们打起精神。</span><span
  148. style="margin-left:100px">&nbsp;</span><span id="too-bad-theyre">可惜它们太小了,在这地图上显示不出来。</span></div>
  149. <div class="essay" style="left:130000px">黑夜给了我黑色的眼睛,却只能看见一片虚无~</div>
  150. <div class="essay" style="left:140000px">假如你以120km/h的速度开车从地球出发,那你要花500年才能到这。</div>
  151. <div class="essay" style="left:170000px"><span id="all-these-distances">友情提示:这些距离都只是平均值。</span> <span
  152. style="margin-left:200px">&nbsp;</span><span
  153. id="the-distance-between">两颗行星间的实际距离取决于它们在公转轨道上的相对位置。</span><span
  154. style="margin-left:200px">&nbsp;</span><span id="so-if-youre">也就是说假如你计划去木星玩玩,你可能不能用这张地图了。</span>
  155. </div>
  156. <div class="essay" style="left:180000px"><span id="if-you-plan">假如规划得当,你在行星间的旅行会快得多。</span><span
  157. style="margin-left:200px">&nbsp;</span><span
  158. id="the-new-horizons">比如2006年发射的新地平线号探测器只用了13个月就到了木星。</span><span
  159. style="margin-left:200px">&nbsp;</span><span id="dont-worry-itll">别太担心,滚动条滚到木星的时间肯定比13个月短多了。</span>
  160. </div>
  161. <div class="essay" style="left:200000px">快到木星啦。</div>
  162. <div class="essay" style="left:215000px">骗你的,现在才快到木星啦。</div>
  163. <div class="essay" style="left:245000px">在这里我们有很多时间思考…</div>
  164. <div class="essay" style="left:287786px">庆祝一下吧!我们刚走过了十亿公里。</div>
  165. <div class="essay" style="left:305000px"><span id="i-guess-this">我猜这就是为什么大部分太阳系地图都不会按比例来画。</span><span
  166. style="margin-left:100px">&nbsp;</span><span id="its-not-hard">按比例画行星倒不难。</span><span
  167. style="margin-left:100px">&nbsp;</span><span id="its-the-empty">这之间的空间是个问题。</span></div>
  168. <div class="essay" style="left:322000px">大部分太阳系空间图都遗漏了最重要的部分——空间。</div>
  169. <div class="essay" style="left:349000px">我们习惯了处理琐碎而微小的事务。</div>
  170. <div class="essay" style="left:376000px"><span id="when-it-comes">当我们研究的问题是地球的年龄、西伯利亚的雪花、美国国债…</span><span
  171. style="margin-left:100px">&nbsp;</span><span id="those-things-are">这些数字对于我们的大脑来说还是太大了。</span></div>
  172. <div class="essay" style="left:430000px">为了理解大的东西,我们需要把它们分解成易于理解的小事物。</div>
  173. <div class="essay" style="left:457000px">为此,我们常常打比方,但多数时候达不到效果。</div>
  174. <div class="essay" style="left:484000px">无论如何,我们还是来打几个比方…</div>
  175. <div class="essay" style="left:511000px"><span id="you-would-need">要显示完整的地图,你需要 </span> <span
  176. id="monitors">886</span> <span id="of-these-screens"> 个屏幕一个接一个连在一起。</span><span id="depth"></span>
  177. </div>
  178. <div class="essay" style="left:538000px"><span
  179. id="if-this-map">假如用高清打印机来打印这张地图(每英寸300个像素),这张地图上根本看不到地球,而且整张纸的长度大概会有 145 米。</span><span
  180. style="margin-left:200px">&nbsp;</span><span id="475-feet-is">145 米大概是一个半足球场的长度。</span>
  181. </div>
  182. <div class="essay" style="left:565000px"><span id="even-though-we">当时空的尺度被放大,会发生许多事情。</span><span
  183. style="margin-left:100px">&nbsp;</span> <span id="a-drop-of">滴水可以穿石。</span><span
  184. style="margin-left:100px">&nbsp;</span><span id="an-amoeba-can">变形虫能变成海豚。</span><span
  185. style="margin-left:100px">&nbsp;</span><span id="a-star-can">恒星会向内坍缩。</span></div>
  186. <div class="essay" style="left:592000px">
  187. 没有比喻能描述虚无,因为根据定义,只要虚无被描述了出来,它就不是虚无了。</div>
  188. <div class="essay" style="left:619000px"><span
  189. id="its-a-good">我们能看到这些微小的恒星和行星真的是挺好的,否则我们就没有任何参考点了。</span><span
  190. style="margin-left:200px">&nbsp;</span><span id="wed-be-surrounded">我们被不可理解的虚无包围了。</span></div>
  191. <div class="essay" style="left:646000px">
  192. 这个空虚的世界很容易让你发疯。举个例子,假如你在一个五感尽失的大缸子里呆久了,你的大脑就会产生幻觉,你会看到或是听到根本不存在的东西。</div>
  193. <div class="essay" style="left:673000px">所以说大脑是理解不了虚无的。</div>
  194. <div class="essay" style="left:700000px">
  195. “不好意思,人类们。”进化说,“因为要对付这些想吃你们的老虎、你们毛发里的寄生虫、以及永不停歇对吃吃吃的渴望,我有点忙。我并没有这个时间来让你们理解虚无。”</div>
  196. <div class="essay" style="left:727000px">
  197. 从神经学上说,我们只能处理某几个特定大小、特定能量的波长。对于我们处理不了的其它东西,我们得编一些抽象的模型,然后努力地把它们往我们能理解的东西上靠。</div>
  198. <div class="essay" style="left:754000px"><span
  199. id="the-mental-models">数学里的概念模型对理解这么长的距离有特别大的帮助,但是…</span><span
  200. style="margin-left:100px">&nbsp;</span><span id="abstraction-is-pretty">抽象法还是不能令人满意。</span></div>
  201. <div class="essay" style="left:781000px">
  202. 当你听到别人讲起“这个宇宙的奥妙太多了啊!我们根本没办法了解的”这一般是一个科幻小说里UFO或者超能力故事的开头,假如你晚上看这个的话你肯定会睡不着。</div>
  203. <div class="essay" style="left:808000px">
  204. 莎士比亚说过:“在这天地间有许多事情是人类哲学所不能解释的。”这肯定是他为了增加鬼故事可信度而卖的破绽。</div>
  205. <div class="essay" style="left:860000px">
  206. 总而言之我们的大脑是理解不了所有这些虚空、这些大范围的东西的。这幅地图、这些隐喻也帮不了忙。
  207. </div>
  208. <div class="essay" style="left:889000px">你看到了这个点,然后你去找下一个点,这中间的虚空是无趣的。</div>
  209. <div class="essay" style="left:916000px">
  210. 实际上到处都是虚空,它们占领了99.9999999999999999999958%的已知宇宙。</div>
  211. <div class="essay" style="left:943000px">就算是原子,它内部也大都是空的。</div>
  212. <div class="essay" style="left:970000px">
  213. 假如氢原子的质子就是这幅地图上太阳那么大,我们还需要11个这么大的地图来表示从氢原子质子到电子的平均距离。
  214. </div>
  215. <div class="essay" style="left:997000px"><span
  216. id="some-theories-say">有些理论说:所有的这些虚空实际上全部都是充满能量的暗物质,并没有什么真正的虚空…</span><span
  217. style="margin-left:100px">&nbsp;</span><span id="but-come-on">拜托,只有实在的东西对我们才有价值。</span></div>
  218. <div class="essay" style="left:1024000px">其实你也可以说宇宙是“总的来说没啥东西”。</div>
  219. <div class="essay" style="left:1051000px">假如宇宙的这么多部分都是由虚空构成的,那像我们这种活在中间的一小片灰尘上的人类又算是什么呢?
  220. </div>
  221. <div class="essay" style="left:1078000px"><span
  222. id="is-the-known">已知的宇宙是99.9999999999999999999958%的空?</span><span
  223. style="margin-left:100px">&nbsp;</span><span id="or-is-it">还是说0.0000000000000000000042%的实?</span>
  224. </div>
  225. <div class="essay" style="left:1105000px">
  226. 既然虚空占了世界的这么大一部分,那某种意义上恒星、行星和人类是不是这优雅整齐的虚无里的差错呢?就像黑毛衣上的一根白色绒毛?</div>
  227. <div class="essay" style="left:1132000px">不过假如没有了这些差错,也就不会有可以测量出来的虚无,或者说也就没有人来测量了。
  228. </div>
  229. <div class="essay" style="left:1159000px"><span
  230. id="you-might-say">你也可以说是这么多的虚空让微小的点变得更有意义——简而言之事实就是:它们并不是空的。</span><span
  231. style="margin-left:100px">&nbsp;</span><span
  232. id="if-youre-drowning">假如你在大海中间快被淹死了,这时一小块浮木就有很大的意义了。</span>
  233. </div>
  234. <div class="essay" style="left:1186000px">如果说千万个星球全部一个接一个地紧挨在一起会怎么样?那就不会有哪一个星球是特殊的了。
  235. </div>
  236. <div class="essay" style="left:1213000px">这样看来我们都同时都渺小得可怜,也奇迹般伟大。</div>
  237. <div class="essay" style="left:1240000px"><span
  238. id="whether-you-more">你感受到更多是渺小的伟大还是无尽的虚无,取决于你是什么样的人以及你的大脑激素在这瞬间是怎么平衡的。</span><span
  239. id="we-walk-around">我们一路走来,原来身体内部还有一个小型的感性的宇宙。</span></div>
  240. <div class="essay" style="left:1267000px">
  241. 所以说不论我们自轻还是自大,按宇宙的构造看来,它对这两个极端都有很好的包容度呢。这么一想还是挺安心的。</div>
  242. <div class="essay" style="left:1421000px">你停下来仔细思考的话,你会发现你能在这一片虚无的中间其实是蛮神奇的一件事情。</div>
  243. <div class="essay" style="left:1550000px">祝贺你走了这么远。</div>
  244. <ul class="navi">
  245. <li><a href="#suntxt" class="planetjump">日</a></li>
  246. <li><a href="#merctxt" class="planetjump">水</a></li>
  247. <li><a href="#venustxt" class="planetjump">金</a></li>
  248. <li><a href="#earthtxt" class="planetjump">地</a></li>
  249. <li><a href="#marstxt" class="planetjump">火</a></li>
  250. <li><a href="#jupitertxt" class="planetjump">木</a></li>
  251. <li><a href="#saturntxt" class="planetjump">土</a></li>
  252. <li><a href="#uranustxt" class="planetjump">天</a></li>
  253. <li><a href="#neptunetxt" class="planetjump">海</a></li>
  254. <li><a href="#plutotxt" class="planetjump">冥</a></li>
  255. </ul>
  256. <div id="distance-counter">
  257. <div id="counter">8.4 光分</div><span id="selectarrow"><img src="./select-arrow.svg"></span>
  258. <div id="unitselect" style="display: none;">
  259. <ul>
  260. <li><a href="" id="km">千米</a></li>
  261. <li><a href="" id="mi">英里</a></li>
  262. <li><a href="" id="au">天文单位</a></li>
  263. <li><a href="" id="lightminutes">光分</a></li>
  264. <li><a href="" id="earths">地球直径</a></li>
  265. <li><a href="" id="pixels">像素</a></li>
  266. <li><a href="" id="buses">公交车长度</a></li>
  267. <li><a href="" id="bluewhales">蓝鲸长度</a></li>
  268. <li><a href="" id="greatwalls">长城</a></li>
  269. </ul>
  270. </div>
  271. </div>
  272. <div id="lightspeeder"><a href="" style="opacity: 0.7;">太慢了!我要光速前进!<i
  273. class="glyphicon glyphicon-arrow-right"></i><span class="warpfactor"> </span></a>
  274. </div>
  275. <div id="lightspeedmsg" style="display: none;">
  276. <div id="msg1" style="display: none;">光前进的速度就这么快…</div>
  277. </div>
  278. <script type="text/javascript" src="./jquery.easing.1.3.js"></script>
  279. <script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
  280. <script type="text/javascript" src="./pxmoon.js"></script>
  281. </body>