<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李白仕途变化互动展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8C1515', // 深红色
secondary: '#F5D76E', // 金色
tertiary: '#E8C39E', // 棕色
background: '#F9F5F0', // 米白色
textDark: '#333333', // 深灰色
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
serif: ['Noto Serif SC', 'serif'],
cursive: ['Ma Shan Zheng', 'cursive']
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-walk {
animation: walk 1.5s steps(12) infinite;
}
.animate-fade-in {
animation: fadeIn 0.8s ease-in-out forwards;
}
.animate-slide-up {
animation: slideUp 0.8s ease-out forwards;
}
.animate-slide-down {
animation: slideDown 0.8s ease-out forwards;
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes walk {
0% {
background-position: 0px;
}
100% {
background-position: -288px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.character-sprite {
width: 24px;
height: 32px;
background-image: url('https://picsum.photos/seed/li-bai/288/32');
background-size: 288px 32px;
image-rendering: pixelated;
}
.timeline-item.active .timeline-dot {
transform: scale(1.5);
border-color: #F5D76E;
}
.timeline-item.active .timeline-content {
opacity: 1;
transform: translateX(0);
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-background text-textDark min-h-screen">
<!-- 页面顶部 -->
<header class="relative bg-primary text-white overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/seed/li-bai-bg/1920/500')] bg-cover bg-center opacity-30"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/60"></div>
<div class="container mx-auto px-4 py-16 relative z-10">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-cursive text-center text-shadow animate-fade-in">李白仕途人生</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-center mt-4 max-w-3xl mx-auto opacity-90 animate-slide-up">
探索这位伟大诗人"仕"与"隐"的永恒挣扎，见证政治抱负的破灭如何成就文学史上的不朽传奇
</p>
</div>
<!-- 装饰性波浪 -->
<div class="absolute bottom-0 left-0 w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
<path fill="#F9F5F0" fill-opacity="1" d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,53.3C672,53,768,75,864,80C960,85,1056,75,1152,64C1248,53,1344,43,1392,37.3L1440,32L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z"></path>
</svg>
</div>
</header>
<main class="container mx-auto px-4 py-12">
<!-- 简介部分 -->
<section class="mb-16 max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow-xl p-6 md:p-8 border-l-4 border-primary animate-fade-in">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-serif font-bold mb-4 text-primary">仕途与诗途的交织</h2>
<p class="text-lg leading-relaxed mb-4">
李白（701年—762年），字太白，号青莲居士，又号"谪仙人"，是唐代著名诗人。他一生渴望在政治上有所作为，却仕途坎坷。其政治抱负的破灭反而成就了中国文学史上的不朽传奇。
</p>
<p class="text-lg leading-relaxed">
下面的时间线展示了李白人生仕途的主要阶段，通过互动你可以了解他在不同时期的经历和创作。
</p>
</div>
</section>
<!-- 互动时间线 -->
<section class="mb-20">
<div class="text-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-serif font-bold text-primary">仕途人生时间线</h2>
<p class="text-lg mt-2 opacity-80">点击或滑动查看李白不同人生阶段</p>
</div>
<!-- 角色移动区域 -->
<div class="relative mb-16 h-40 md:h-60 overflow-hidden bg-[url('https://picsum.photos/seed/li-bai-path/1200/200')] bg-cover bg-center rounded-xl">
<div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-background/80 to-transparent"></div>
<div id="character" class="absolute bottom-8 left-1/4 character-sprite animate-walk transition-all duration-1000 ease-in-out" style="transform: scale(2);"></div>
<div id="location-indicator" class="absolute top-4 right-4 bg-primary/80 text-white px-3 py-1 rounded-full text-sm font-medium opacity-0 transition-opacity duration-500"></div>
</div>
<!-- 时间线 -->
<div class="relative timeline-container">
<!-- 时间线轨道 -->
<div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-tertiary transform md:translate-x-[-0.5px]"></div>
<!-- 时间线项目 -->
<div class="space-y-10 md:space-y-0 relative">
<!-- 少年求仕准备期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="1">
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<div class="timeline-content opacity-0 transform translate-x-[-20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">少年求仕准备期（701-724年）</h3>
<p class="mt-2">生于西域碎叶城，5岁迁居四川。隐居匡山读书，习纵横术与剑术，形成政治抱负。20岁拜谒益州长史苏颋，获"天才英丽"评价。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">读书</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">习剑</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">初露锋芒</span>
</div>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"申管晏之谈，谋帝王之术"</p>
</div>
</div>
</div>
<!-- 初出蜀地漫游期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="2">
<div class="md:w-1/2 md:pr-8 md:text-right md:order-1 md:ml-auto opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"十五观奇书，作赋凌相如"</p>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 mb-4 md:mb-0 md:order-2">
<div class="timeline-content opacity-0 transform translate-x-[20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">初出蜀地漫游期（724-742年）</h3>
<p class="mt-2">"仗剑去国，辞亲远游"，出三峡，游洞庭。与故宰相孙女成婚，借姻亲接触上层。向韩朝宗献书未获举荐，首次入仕尝试失败。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">漫游</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">献书</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">失意</span>
</div>
</div>
</div>
</div>
<!-- 奉诏入京巅峰期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="3">
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<div class="timeline-content opacity-0 transform translate-x-[-20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">奉诏入京巅峰期（742-744年）</h3>
<p class="mt-2">因玉真公主与道士吴筠推荐，受玄宗三诏入京，任翰林待诏。代草王言，陪侍游宴，创作《清平调》等宫廷诗。后遭权贵排挤，赐金放还。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">翰林待诏</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">创作巅峰</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">权贵排挤</span>
</div>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"仰天大笑出门去，我辈岂是蓬蒿人"</p>
</div>
</div>
</div>
<!-- 二次漫游求仕期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="4">
<div class="md:w-1/2 md:pr-8 md:text-right md:order-1 md:ml-auto opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"天生我材必有用，千金散尽还复来"</p>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 mb-4 md:mb-0 md:order-2">
<div class="timeline-content opacity-0 transform translate-x-[20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">二次漫游求仕期（744-755年）</h3>
<p class="mt-2">洛阳遇杜甫，梁园逢高适，形成"诗坛铁三角"。北上幽燕察觉安禄山谋反迹象，南下宣城寄情山水。向北海太守李邕献诗，欲投靠永王李璘未果。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">交友</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">山水</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">预谋反乱</span>
</div>
</div>
</div>
</div>
<!-- 安史之乱从政期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="5">
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<div class="timeline-content opacity-0 transform translate-x-[-20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">安史之乱从政期（755-759年）</h3>
<p class="mt-2">受永王李璘邀请，入幕府任从事，创作《永王东巡歌》。永王兵败被杀，李白以"附逆"罪入狱，经营救免死，流放夜郎。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">入幕永王</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">流放</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">政治灾难</span>
</div>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"但用东山谢安石，为君谈笑静胡沙"</p>
</div>
</div>
</div>
<!-- 暮年赦免终局期 -->
<div class="timeline-item relative flex flex-col md:flex-row items-center group" data-period="6">
<div class="md:w-1/2 md:pr-8 md:text-right md:order-1 md:ml-auto opacity-0 md:opacity-100">
<div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary hidden md:block">
<p class="italic">"大鹏飞兮振八裔，中天摧兮力不济"</p>
</div>
</div>
<div class="absolute left-0 md:left-1/2 transform md:translate-x-[-50%] z-10">
<div class="timeline-dot w-6 h-6 rounded-full bg-primary border-2 border-white shadow-lg transition-all duration-300 cursor-pointer"></div>
</div>
<div class="md:w-1/2 md:pl-8 mb-4 md:mb-0 md:order-2">
<div class="timeline-content opacity-0 transform translate-x-[20px] transition-all duration-500 bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
<h3 class="text-xl font-bold text-primary">暮年赦免终局期（759-762年）</h3>
<p class="mt-2">流放途中遇大赦，返江夏，写下《早发白帝城》。欲投李光弼军幕平叛，因病返金陵。62岁病逝当涂，临终作《临终歌》。</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">赦免</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">病逝</span>
<span class="px-2 py-1 bg-tertiary/20 text-textDark rounded text-sm">不朽绝笔</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 诗作与仕途映射表 -->
<section class="mb-20">
<div class="text-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-serif font-bold text-primary">诗作与仕途映射</h2>
<p class="text-lg mt-2 opacity-80">李白的诗歌反映了他仕途的起伏与心境的变化</p>
</div>
<div class="overflow-x-auto bg-white rounded-lg shadow-xl">
<table class="w-full min-w-[640px]">
<thead>
<tr class="bg-primary text-white">
<th class="px-6 py-4 text-left font-bold">仕途阶段</th>
<th class="px-6 py-4 text-left font-bold">代表作</th>
<th class="px-6 py-4 text-left font-bold">诗句折射</th>
<th class="px-6 py-4 text-left font-bold">心境</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4">奉诏入京</td>
<td class="px-6 py-4">《清平调三首》</td>
<td class="px-6 py-4">"云想衣裳花想容"</td>
<td class="px-6 py-4">意气风发，踌躇满志</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4">赐金放还</td>
<td class="px-6 py-4">《行路难》</td>
<td class="px-6 py-4">"停杯投箸不能食"</td>
<td class="px-6 py-4">怀才不遇，愤懑不平</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4">流放夜郎</td>
<td class="px-6 py-4">《早发白帝城》</td>
<td class="px-6 py-4">"轻舟已过万重山"</td>
<td class="px-6 py-4">重获自由，如释重负</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4">临终绝笔</td>
<td class="px-6 py-4">《临终歌》</td>
<td class="px-6 py-4">"仲尼亡兮谁为出涕"</td>
<td class="px-6 py-4">壮志未酬，遗恨千古</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 仕途失败原因 -->
<section class="mb-20">
<div class="text-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-serif font-bold text-primary">仕途失败核心原因</h2>
<p class="text-lg mt-2 opacity-80">李白的政治理想与现实的冲突</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-primary transform transition-all duration-300 hover:scale-105">
<div class="text-primary text-3xl mb-4">
<i class="fa fa-user-circle"></i>
</div>
<h3 class="text-xl font-bold mb-2">性格冲突</h3>
<p class="text-gray-700">狂放不羁的个性与官场规则格格不入，无法适应复杂的政治环境和人际关系。</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-primary transform transition-all duration-300 hover:scale-105">
<div class="text-primary text-3xl mb-4">
<i class="fa fa-eye-slash"></i>
</div>
<h3 class="text-xl font-bold mb-2">政治误判</h3>
<p class="text-gray-700">错估永王与肃宗的权力斗争，卷入政治漩涡，成为权力斗争的牺牲品。</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-primary transform transition-all duration-300 hover:scale-105">
<div class="text-primary text-3xl mb-4">
<i class="fa fa-ban"></i>
</div>
<h3 class="text-xl font-bold mb-2">身份限制</h3>
<p class="text-gray-700">商贾出身无法通过科举入仕，只能依赖举荐制，机会有限且不稳定。</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-primary transform transition-all duration-300 hover:scale-105">
<div class="text-primary text-3xl mb-4">
<i class="fa fa-cloud"></i>
</div>
<h3 class="text-xl font-bold mb-2">理想错位</h3>
<p class="text-gray-700">诗人的浪漫主义情怀与现实政治需求脱节，无法实现"济苍生、安社稷"的抱负。</p>
</div>
</div>
</section>
<!-- 互动控制区 -->
<section class="bg-white rounded-lg shadow-xl p-6 mb-16 max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-primary mb-4">探索李白的更多作品</h2>
<div class="flex flex-wrap gap-4">
<button id="btn-poem-1" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/80 transition-colors duration-200">
《将进酒》
</button>
<button id="btn-poem-2" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/80 transition-colors duration-200">
《静夜思》
</button>
<button id="btn-poem-3" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/80 transition-colors duration-200">
《望庐山瀑布》
</button>
<button id="btn-poem-4" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/80 transition-colors duration-200">
《蜀道难》
</button>
</div>
<div id="poem-display" class="mt-6 p-4 bg-background rounded-md border border-gray-200 min-h-[200px] opacity-0 transition-opacity duration-500">
<h3 id="poem-title" class="text-xl font-bold text-primary mb-2"></h3>
<p id="poem-content" class="text-lg leading-relaxed"></p>
<p id="poem-note" class="mt-4 text-sm text-gray-600 italic"></p>
</div>
</section>
</main>
<footer class="bg-primary text-white py-10">
<div class="container mx-auto px-4">
<div class="text-center">
<h2 class="text-2xl font-cursive mb-4">李白仕途人生</h2>
<p class="max-w-2xl mx-auto mb-6">
政治上的失意成就了文学上的不朽，李白的诗歌永远闪耀在中国文化的星空
</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-book"></i> 了解更多
</a>
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-pencil"></i> 相关文章
</a>
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-comments"></i> 讨论交流
</a>
</div>
<p class="mt-6 text-sm opacity-80">
© 2023 李白仕途人生互动展示 | 数据来源于历史文献
</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const timelineItems = document.querySelectorAll('.timeline-item');
const character = document.getElementById('character');
const locationIndicator = document.getElementById('location-indicator');
const poemDisplay = document.getElementById('poem-display');
const poemTitle = document.getElementById('poem-title');
const poemContent = document.getElementById('poem-content');
const poemNote = document.getElementById('poem-note');
const poemButtons = document.querySelectorAll('[id^="btn-poem-"]');
// 李白的诗歌库
const poems = [
{
title: "将进酒",
content: "君不见黄河之水天上来，奔流到海不复回。\n君不见高堂明镜悲白发，朝如青丝暮成雪。\n人生得意须尽欢，莫使金樽空对月。\n天生我材必有用，千金散尽还复来。\n烹羊宰牛且为乐，会须一饮三百杯。\n岑夫子，丹丘生，将进酒，杯莫停。\n与君歌一曲，请君为我倾耳听。\n钟鼓馔玉不足贵，但愿长醉不复醒。\n古来圣贤皆寂寞，惟有饮者留其名。\n陈王昔时宴平乐，斗酒十千恣欢谑。\n主人何为言少钱，径须沽取对君酌。\n五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
note: "此诗作于李白赐金放还之后，表现了他对人生短暂的感慨和及时行乐的思想，同时也展现了他的豪放不羁和对权贵的蔑视。"
},
{
title: "静夜思",
content: "床前明月光，疑是地上霜。\n举头望明月，低头思故乡。",
note: "这首脍炙人口的小诗，是李白最经典的作品之一，通过描写客居他乡的静夜之景，抒发了深深的思乡之情。"
},
{
title: "望庐山瀑布",
content: "日照香炉生紫烟，遥看瀑布挂前川。\n飞流直下三千尺，疑是银河落九天。",
note: "此诗形象地描绘了庐山瀑布雄奇壮丽的景色，反映了诗人对祖国大好河山的无限热爱。"
},
{
title: "蜀道难",
content: "噫吁嚱，危乎高哉！蜀道之难，难于上青天！\n蚕丛及鱼凫，开国何茫然！\n尔来四万八千岁，不与秦塞通人烟。\n西当太白有鸟道，可以横绝峨眉巅。\n地崩山摧壮士死，然后天梯石栈相钩连。\n上有六龙回日之高标，下有冲波逆折之回川。\n黄鹤之飞尚不得过，猿猱欲度愁攀援。\n青泥何盘盘，百步九折萦岩峦。\n扪参历井仰胁息，以手抚膺坐长叹。\n问君西游何时还？畏途巉岩不可攀。\n但见悲鸟号古木，雄飞雌从绕林间。\n又闻子规啼夜月，愁空山。\n蜀道之难，难于上青天，使人听此凋朱颜！\n连峰去天不盈尺，枯松倒挂倚绝壁。\n飞湍瀑流争喧豗，砯崖转石万壑雷。\n其险也如此，嗟尔远道之人胡为乎来哉！\n剑阁峥嵘而崔嵬，一夫当关，万夫莫开。\n所守或匪亲，化为狼与豺。\n朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。\n锦城虽云乐，不如早还家。\n蜀道之难，难于上青天，侧身西望长咨嗟！",
note: "这首诗以浪漫主义的手法，展开丰富的想象，艺术地再现了蜀道峥嵘、突兀、强悍、崎岖等奇丽惊险和不可凌越的磅礴气势，借以歌咏蜀地山川的壮秀，显示出祖国山河的雄伟壮丽，充分显示了李白的浪漫气质和热爱自然的感情。"
}
];
// 位置配置
const positions = [
{ left: '10%', location: '四川绵州（少年时期）' },
{ left: '25%', location: '洞庭湖（初出蜀地）' },
{ left: '40%', location: '长安（翰林待诏）' },
{ left: '55%', location: '洛阳（与杜甫相遇）' },
{ left: '70%', location: '庐山（永王幕府）' },
{ left: '85%', location: '当涂（病逝之地）' }
];
// 初始化第一个时间线项目为激活状态
activateTimelineItem(0);
// 为每个时间线项目添加点击事件
timelineItems.forEach((item, index) => {
item.querySelector('.timeline-dot').addEventListener('click', () => {
activateTimelineItem(index);
});
});
// 为诗歌按钮添加点击事件
poemButtons.forEach((button, index) => {
button.addEventListener('click', () => {
showPoem(index);
});
});
// 激活时间线项目函数
function activateTimelineItem(index) {
// 移除所有激活状态
timelineItems.forEach(item => {
item.classList.remove('active');
});
// 添加激活状态
timelineItems[index].classList.add('active');
// 移动角色
character.style.left = positions[index].left;
// 显示位置指示器
locationIndicator.textContent = positions[index].location;
locationIndicator.style.opacity = '1';
// 3秒后隐藏位置指示器
setTimeout(() => {
locationIndicator.style.opacity = '0';
}, 3000);
}
// 显示诗歌函数
function showPoem(index) {
const poem = poems[index];
poemTitle.textContent = poem.title;
poemContent.textContent = poem.content.replace(/\n/g, '\n\n');
poemNote.textContent = poem.note;
poemDisplay.style.opacity = '0';
setTimeout(() => {
poemDisplay.style.opacity = '1';
}, 300);
}
// 添加滚动动画
const animateOnScroll = () => {
const elements = document.querySelectorAll('.timeline-content');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateX(0)';
}
});
};
// 初始检查
animateOnScroll();
// 滚动时检查
window.addEventListener('scroll', animateOnScroll);
});
</script>
</body>
</html>
index.html
index.html