明医 · 中国医药数字展览

明医 · 中国医药数字展览

PC 端静态多页数字展（viewport=width=1280）。以滚动叙事（本地 GSAP + ScrollTrigger）串联七章；顶栏跳转，无构建、无 CDN。

---

一、功能介绍

全站共通

• 顶栏品牌「明医」+ 七篇章导航；当前页高亮；底部阅读进度条。
• 首屏叠图导航（nav-over-hero）：滚过首屏后补实底。
• 章末「下一章」主链 + 「回到本页顶」；末章回杏林闭环。

各页功能

页	文件	功能要点
01 杏林	index.html	药柜首屏雾气离场；四门横滑定屏进章；药柜抽屉 scrub 抽出；尾声进名师
02 名师	masters.html	五师立像横滑定屏（侧栏可点）；医道短句；尾声进本草
03 本草	herbs.html	五味转盘定屏切换；性味色环 scrub 点亮；尾声进四诊
04 四诊	diagnose.html	风车旋叶定屏（望闻问切）；印证归中；尾声进方剂
05 方剂	formula.html	君臣佐使四味环位归入；斜向对开揭方笺；尾声进炮制
06 炮制	decoction.html	纵贯药梯（切炒煎服）钉线 + 竖窗 scrub；汤成椭圆内蒸汽循环；尾声进传续
07 传续	living.html	今用三途双层扫色；感知卡本机 localStorage 保存/清除；朱砂印收束回杏林

建议浏览顺序：杏林 → 名师 → 本草 → 四诊 → 方剂 → 炮制 → 传续 → 回杏林。

---

二、目录介绍

本项目是多页静态站：根目录 7 个网页各自对应一章；样式在 css/，脚本在 js/，图片在 images/。

记住一条规则：某一章的页面、样式、脚本文件名相同。
例如杏林 = index.html + css/index.css + js/index.js。改某一章，优先改这三处。

2.1 完整目录

homework-mingyi-yiyao-html-gsap/          ← 项目根目录（从这里打开网页）
│
├── index.html                           ← 01 杏林（展览首页，建议从这里开始）
├── masters.html                         ← 02 名师
├── herbs.html                           ← 03 本草
├── diagnose.html                        ← 04 四诊
├── formula.html                         ← 05 方剂
├── decoction.html                       ← 06 炮制
├── living.html                          ← 07 传续（末章，可回杏林）
├── README.md                            ← 本说明文档
│
├── 演示材料/
│   └── 演示视频.mp4                      ← 演示用备注（可放视频说明）
│
├── css/                                 ← 样式表（管颜色、布局、外观）
│   ├── public.css                       ← 全站共用：顶栏、页脚、章节跳转按钮等
│   ├── index.css                        ← 仅杏林页使用
│   ├── masters.css                      ← 仅名师页使用
│   ├── herbs.css                        ← 仅本草页使用
│   ├── diagnose.css                     ← 仅四诊页使用
│   ├── formula.css                      ← 仅方剂页使用
│   ├── decoction.css                    ← 仅炮制页使用
│   └── living.css                       ← 仅传续页使用
│
├── js/                                  ← 脚本（管滚动动画与交互）
│   ├── public.js                        ← 全站共用：顶栏高亮、阅读进度条
│   ├── index.js                         ← 仅杏林页动画
│   ├── masters.js                       ← 仅名师页动画
│   ├── herbs.js                         ← 仅本草页动画
│   ├── diagnose.js                      ← 仅四诊页动画
│   ├── formula.js                       ← 仅方剂页动画
│   ├── decoction.js                     ← 仅炮制页动画
│   ├── living.js                        ← 仅传续页动画（含本机留存）
│   └── vendor/                          ← 第三方动画库（勿删、勿改成外网链接）
│       ├── gsap.min.js
│       └── ScrollTrigger.min.js
│
└── images/                              ← 图片素材（按篇章分文件夹）
    ├── shared/                          ← 全站共用图（如品牌 Logo）
    ├── index/                           ← 杏林用图
    ├── masters/                         ← 名师用图
    ├── herbs/                           ← 本草用图
    ├── diagnose/                        ← 四诊用图
    ├── formula/                         ← 方剂用图
    ├── decoction/                       ← 炮制用图
    └── living/                          ← 传续用图

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-mingyi-yiyao-html-gsap