# 假如月亮只有一个像素那么大

**Repository Path**: chafang/1pixelmoon

## Basic Information

- **Project Name**: 假如月亮只有一个像素那么大
- **Description**: 以月球直径为1像素的比例尺，用网页滚动直观呈现太阳系真实距离的交互地图。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-11
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 假如月亮只有一个像素那么大

一幅精准又冗长的太阳系比例尺地图。以月球直径（3,474 km）为 1 像素，按真实比例将整个太阳系绘制成一张可纵向滚动的网页。

## 效果预览

- 地图总高度：**1,702,774 像素**
- 太阳直径：400 像素
- 地球直径：3 像素
- 月球直径：1 像素（基准）
- 冥王星直径：1 像素

## 功能特性

**距离计数器**
页面右下角实时显示当前滚动位置距太阳的距离，支持多种单位切换：
- 千米
- 高速汽车（150 km/h）
- 歼-20（2 马赫）
- 东风-61（55 马赫）
- 天宫空间站（22.6 马赫）
- 帕克太阳探测器（635 马赫）
- 光速 1% / 光速 10%

**下一站提示**
滚动时自动显示下一个天体的名称、距太阳距离，以及按当前速度还需多久抵达。

**导航面板**
左侧快捷导航，可一键跳转到任意天体位置。

**探索面板**
右侧附加说明，包含太阳系边疆（奥尔特星云）等延伸知识。

## 天体数据

| 天体 | 距太阳（km） | 像素大小 |
|------|------------|---------|
| 太阳 | — | 400 px |
| 水星 | 57,900,000 | 1 px |
| 金星 | 108,200,000 | 3 px |
| 地球 | 149,600,000 | 3 px |
| 月球 | 149,984,400 | 1 px |
| 火星 | 227,900,000 | 2 px |
| 木星 | 778,500,000 | 40 px |
| 土星 | 1,432,000,000 | 34 px（含环 65 px）|
| 天王星 | 2,867,000,000 | 14 px |
| 海王星 | 4,515,000,000 | 14 px |
| 冥王星 | 5,906,000,000 | 1 px |

## 文件结构

```
moon/
├── index.html      # 主地图页面
├── about.html      # 关于作者页面
├── script.js       # 滚动交互逻辑
├── style.css       # 样式
├── jquery.min.js   # jQuery 依赖
└── asset/          # 图片资源（头像、二维码）
```

## 使用方法

直接用浏览器打开 `index.html` 即可，无需服务器，无需构建。

## 技术栈

- 纯静态 HTML / CSS / JavaScript
- jQuery（滚动事件、动画跳转）
- SVG（行星图形绘制）

## 关于作者

山猫，85 后全栈开发者，十多年 Web 开发经验。详见 [about.html](about.html)。