本草纲目溯源

本草纲目溯源

一、项目简介

「本草纲目溯源」是一款以中国传统医药文化为主题的静态展示网站。项目以明代李时珍所著《本草纲目》为切入点，通过首页、名人、著作、药材四大模块，串联中医发展脉络与经典典籍、代表性人物及常见药材知识，整体采用古风视觉与竖排文字排版，配合入场动画、3D 轮播、画卷式详情等交互，呈现「溯本求源」的阅读体验。

技术形态：纯前端多页面应用（HTML + CSS + JavaScript），无后端依赖，可直接在浏览器中打开运行。

主要依赖：jQuery、Swiper 轮播库、Animate.css 动画库。

---

二、功能介绍

2.1 首页（index.html）

• 展示「本草溯源」竖排标题，配合逐字入场动画。
• 中间区域以竖排方式逐列呈现中医起源与《本草纲目》相关简介文案。
• 右侧展示人物动图与「点击进入」入口，引导用户进入名人模块。
• 顶部公共导航栏可在各模块间切换。

2.2 公共导航（common-header.js）

• 全站统一的顶部导航：首页、名人、著作、药材。
• 支持当前页高亮、Logo 展示及导航项 hover 动画效果。
• 各列表页统一调用，保证风格与交互一致。

2.3 名人模块

列表页（mingren.html）

• 以 3D 旋转木马形式展示六位中医药历史名人：神农、扁鹊、张仲景、葛洪、华佗、李时珍。
• 每张人物卡片采用画卷背景，点击可跳转至对应详情。

详情页（mingrenDetail.html）

• 通过 URL 锚点（如 #shennong）定位具体人物。
• 顶部提供返回列表按钮与「名人介绍」标题栏。
• 侧边目录导航便于在多位名人之间快速切换。
• 展示人物立绘与生平、贡献等介绍正文。

2.4 著作模块

列表页（zhuzuo.html）

• 使用 Swiper 轮播展示六部中医经典著作：神农本草经、黄帝内经、难经、伤寒杂病论、肘后备急方、本草纲目。
• 著作封面置于画轴样式框架内，支持左右切换与依次入场动画。
• 点击可进入对应著作详情。

详情页（zhuzuoDetail.html）

• 通过 URL 锚点定位具体著作。
• 顶部返回按钮与「著作介绍」标题栏。
• 章节目录导航，方便在多部著作间浏览。
• 展示著作封面与内容概要介绍。

2.5 药材模块

列表页（yaocai.html）

• 四宫格展示四种药材：黄芪、白术、黄精、党参。
• 药材卡片依次「砸地」入场，并伴随页面轻微震动感，增强视觉反馈。
• 点击卡片进入药材详情。

详情页（yaocaiDetail.html）

• 通过 URL 锚点定位具体药材。
• 左侧/中央展示药材主图，右侧以画卷竖排文字呈现功效、性味等说明。
• 支持属性标注交互：以连线方式标注根、叶、花等部位及其药性说明，便于理解药材结构。

2.6 其他

• 0601.html：名人 3D 轮播的早期原型页面，供参考，非正式入口。
• 演示文件：包含项目演示视频，便于快速了解整体效果与操作流程。

---

三、目录与文件结构

homework-bencaogangmu/
├── index.html                  # 首页
├── mingren.html                # 名人列表页
├── mingrenDetail.html          # 名人详情页
├── zhuzuo.html                 # 著作列表页
├── zhuzuoDetail.html           # 著作详情页
├── yaocai.html                 # 药材列表页
├── yaocaiDetail.html           # 药材详情页
├── 0601.html                   # 3D 轮播原型页（非正式入口）
├── 项目说明.md                 # 本说明文档
│
├── css/                        # 样式文件
│   ├── public.css              # 公共样式（背景、布局等）
│   ├── fonts.css               # 字体引入与定义
│   ├── index.css               # 首页样式
│   ├── mingren.css             # 名人列表页样式
│   ├── mingrenDetail.css       # 名人详情页样式
│   ├── zhuzuo.css              # 著作列表页样式
│   ├── zhuzuoDetail.css        # 著作详情页样式
│   ├── yaocai.css              # 药材列表页样式
│   ├── yaocaiDetail.css        # 药材详情页样式
│   ├── animate.min.css         # Animate.css 动画库
│   └── swiper-bundle.min.css   # Swiper 轮播样式
│
├── js/                         # 脚本文件
│   ├── jquery-3.1.1.min.js     # jQuery 库
│   ├── swiper-bundle.min.js    # Swiper 轮播库
│   ├── common-header.js        # 公共导航栏
│   ├── back-btn.js             # 详情页返回按钮
│   ├── 3d-carousel.js          # 3D 旋转木马组件
│   ├── index.js                # 首页动画逻辑
│   ├── mingren-data.js         # 名人数据
│   ├── mingren.js              # 名人列表页逻辑
│   ├── mingren-detail.js       # 名人详情页逻辑
│   ├── zhuzuo-data.js          # 著作数据
│   ├── zhuzuo.js               # 著作列表页逻辑
│   ├── zhuzuo-detail.js        # 著作详情页逻辑
│   ├── yaocai-data.js          # 药材数据
│   ├── yaocai.js               # 药材列表页逻辑
│   └── yaocai-detail.js        # 药材详情页逻辑
│
├── font/                       # 自定义字体
│   ├── YunFengFeiYunTi-2.ttf
│   ├── 鸿雷板书体（简+繁）.ttf
│   └── 鸿雷板书简体-正式版.ttf
│
├── images/                     # 图片资源
│   ├── logo.png                # 站点 Logo
│   ├── nav-bg.png              # 导航 hover 背景
│   ├── page-bg.png             # 页面背景
│   ├── index-person.gif        # 首页人物动图
│   ├── index-entry-bg.png      # 首页入口按钮背景
│   ├── mingren-huajuan.png     # 名人画卷背景
│   ├── zhuozuo-huazhou.png     # 著作画轴框架
│   ├── book-huajuan.png        # 书籍画卷素材
│   ├── empty-huajuan.png       # 空白画卷素材
│   ├── back-1.png ~ back-3.png # 返回按钮相关素材
│   ├── zhuzuo-prev.png         # 著作轮播上一张
│   ├── zhuzuo-next.png         # 著作轮播下一张
│   ├── 1神农.png ~ 6李时珍.png  # 名人立绘
│   ├── 1神农本草经.png ~ 6本草纲目.png  # 著作封面
│   ├── 1黄芪/                   # 黄芪素材（index.png、根.png、叶.png、花.png）
│   ├── 2白术/                   # 白术素材
│   ├── 3黄精/                   # 黄精素材
│   └── 4党参/                   # 党参素材
│
└── 演示文件/                   # 演示资料
    └── 演示视频.mp4            # 项目演示录屏

---

四、使用说明

1. 用浏览器直接打开根目录下的 index.html 即可访问首页。
2. 通过顶部导航或首页「点击进入」在各模块间浏览。
3. 列表页点击条目进入详情；详情页可通过侧边目录切换内容，或使用返回按钮回到列表。
4. 药材、名人、著作详情页均支持 URL 锚点直达（如 yaocaiDetail.html#huangqi）。

---

五、数据维护说明

• 名人、著作、药材的文案与图片路径集中在 js/mingren-data.js、js/zhuzuo-data.js、js/yaocai-data.js 中维护。
• 新增条目时需同步更新对应列表页数据及 images/ 下相关图片资源。
• 全站导航菜单项在 js/common-header.js 的 NAV_ITEMS 中统一配置。

获取完整源码

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