<!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: '#D4AF37',
tertiary: '#E8C39E',
background: '#F9F5F0',
textDark: '#333333',
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
serif: ['Noto Serif SC', 'serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s linear forwards;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out forwards;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.location-dot {
transition: all 0.3s ease;
}
.location-dot:hover {
r: 8;
fill: #D4AF37;
}
.poem-card {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.poem-card.active {
opacity: 1;
transform: translateY(0);
}
</style>
<link href="https://fonts.googleapis.com/css2?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">
<!-- 页面头部 -->
<header class="relative bg-primary text-white py-20 overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/seed/li-bai-road/1920/500')] bg-cover bg-center opacity-20"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/60"></div>
<div class="container mx-auto px-4 relative z-10">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-serif 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-fade-in">
从宫廷文人到自由诗仙的人生转折之路
</p>
</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">
<h2 class="text-2xl font-serif font-bold mb-4 text-primary">赐金放还：李白人生的转折点</h2>
<p class="text-lg leading-relaxed mb-4">
天宝三载（744年），李白因不能见容于权贵，在京仅三年，就弃官而去，仍然继续他那飘荡四方的流浪生活。"赐金放还"虽然标志着他政治生涯的终结，但却开启了他诗歌创作的黄金时代。
</p>
<p class="text-lg leading-relaxed">
下面的互动地图展示了李白离开长安后的漫游路线，这一路线不仅塑造了他的诗歌风格，也深刻影响了中国文学的发展。
</p>
</div>
</section>
<!-- 互动地图 -->
<section class="mb-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-serif font-bold text-primary">漫游路线图</h2>
<p class="text-lg mt-2 opacity-80">点击时间线或地图上的地点，探索李白的漫游轨迹</p>
</div>
<div class="relative bg-white rounded-lg shadow-xl p-4 md:p-8 overflow-hidden">
<!-- 地图容器 -->
<div class="relative w-full h-[500px] md:h-[600px] mb-8">
<svg id="route-map" viewBox="0 0 1000 600" class="w-full h-full">
<!-- 背景地图 -->
<image href="https://picsum.photos/seed/tang-map/1000/600" width="1000" height="600" opacity="0.3" />
<!-- 路线 -->
<path id="route-1" d="M200,250 L350,200" fill="none" stroke="#8C1515" stroke-width="3" stroke-linecap="round" class="animate-path" />
<path id="route-2" d="M350,200 L450,150 L550,120" fill="none" stroke="#8C1515" stroke-width="3" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="1000" />
<path id="route-3" d="M550,120 L650,180 L750,150 L800,200" fill="none" stroke="#8C1515" stroke-width="3" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="1000" />
<path id="route-4" d="M800,200 L700,300 L600,350" fill="none" stroke="#8C1515" stroke-width="3" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="1000" />
<path id="route-5" d="M600,350 L500,400 L400,450 L300,500" fill="none" stroke="#8C1515" stroke-width="3" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="1000" />
<!-- 地点标记 -->
<circle id="location-1" cx="200" cy="250" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="1" />
<circle id="location-2" cx="350" cy="200" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="1" />
<circle id="location-3" cx="450" cy="150" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="1" />
<circle id="location-4" cx="550" cy="120" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="2" />
<circle id="location-5" cx="650" cy="180" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="2" />
<circle id="location-6" cx="750" cy="150" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="2" />
<circle id="location-7" cx="800" cy="200" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="3" />
<circle id="location-8" cx="700" cy="300" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="3" />
<circle id="location-9" cx="600" cy="350" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="3" />
<circle id="location-10" cx="500" cy="400" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="4" />
<circle id="location-11" cx="400" cy="450" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="4" />
<circle id="location-12" cx="300" cy="500" r="5" fill="#8C1515" class="location-dot cursor-pointer" data-period="5" />
<!-- 地点标签 -->
<text x="200" y="230" text-anchor="middle" fill="#333" font-size="14">长安</text>
<text x="350" y="180" text-anchor="middle" fill="#333" font-size="14">洛阳</text>
<text x="450" y="130" text-anchor="middle" fill="#333" font-size="14">梁宋</text>
<text x="550" y="100" text-anchor="middle" fill="#333" font-size="14">齐州</text>
<text x="650" y="160" text-anchor="middle" fill="#333" font-size="14">德州</text>
<text x="750" y="130" text-anchor="middle" fill="#333" font-size="14">任城</text>
<text x="800" y="180" text-anchor="middle" fill="#333" font-size="14">扬州</text>
<text x="700" y="280" text-anchor="middle" fill="#333" font-size="14">会稽</text>
<text x="600" y="330" text-anchor="middle" fill="#333" font-size="14">天台山</text>
<text x="500" y="380" text-anchor="middle" fill="#333" font-size="14">金陵</text>
<text x="400" y="430" text-anchor="middle" fill="#333" font-size="14">宣城</text>
<text x="300" y="480" text-anchor="middle" fill="#333" font-size="14">幽州</text>
</svg>
<!-- 地点信息卡片 -->
<div id="location-info" class="absolute top-4 right-4 bg-white/90 p-4 rounded-lg shadow-lg max-w-[300px] opacity-0 transition-opacity duration-500">
<h3 id="info-title" class="text-xl font-bold text-primary mb-2"></h3>
<p id="info-year" class="text-sm text-gray-600 mb-2"></p>
<p id="info-description" class="text-gray-700 mb-3"></p>
<div id="info-poem" class="bg-background p-3 rounded text-sm italic"></div>
</div>
</div>
<!-- 时间线 -->
<div class="relative">
<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">长安至洛阳：政治失意与诗友相遇（744年夏）</h3>
<p class="mt-2">自长安东行至洛阳，与杜甫首次会面，两人结为忘年交。创作《将进酒》，与杜甫、高适共游梁宋，形成"诗坛铁三角"。</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 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">漫游齐鲁与入道（744-745年）</h3>
<p class="mt-2">从洛阳到梁宋，再到齐州、德州、任城。在齐州紫极宫受道箓，成为道士。与杜甫第三次会面于东鲁，同访隐士李邕。</p>
</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">南下吴越：仙山寻梦与诗境升华（745-753年）</h3>
<p class="mt-2">从任城南下扬州、会稽、天台山，再到金陵。创作《梦游天姥吟留别》，凭吊贺知章墓，与道友泛舟剡溪。金陵时期与崔成甫交游。</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 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">北上幽燕：危机洞察与政治觉醒（753-755年）</h3>
<p class="mt-2">从金陵到宣城，再北上幽州。在幽州目睹安禄山厉兵秣马，预判安史之乱，写下《北风行》等忧国之作。诗风转向沉郁。</p>
</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-762年）</h3>
<p class="mt-2">从庐山到永王幕府，后因永王兵败，以"附逆"罪流放夜郎。759年遇赦返程，作《早发白帝城》。晚年漂泊金陵、宣城，762年病逝当涂。</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 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>
</div>
</div>
</section>
<!-- 赐金放还背景 -->
<section class="mb-20">
<div class="text-center mb-10">
<h2 class="text-2xl 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-8 max-w-5xl mx-auto">
<div class="bg-white rounded-lg shadow-xl p-6 border-l-4 border-primary">
<h3 class="text-xl font-bold mb-4 text-primary">事件起因</h3>
<p class="mb-4">
李白于天宝元年（742年）奉诏入长安，任翰林待诏，但因其狂放不羁的性格与权贵（如高力士、杨贵妃）产生矛盾，最终被唐玄宗疏远。
</p>
<p>
主流观点认为，天宝三载（744年）春，玄宗以"赐金放还"名义令其离京，实际为政治排挤的结果。部分学者提出李白可能在743年已离开长安，但多数史料支持744年说。
</p>
</div>
<div class="bg-white rounded-lg shadow-xl p-6 border-l-4 border-primary">
<h3 class="text-xl font-bold mb-4 text-primary">赐金性质</h3>
<p class="mb-4">
玄宗赐予的"金"实为象征性补偿，包含俸禄与特权（如"逢坊吃酒，遇库支钱"），但其效力仅限于玄宗掌权时期。
</p>
<p>
756年安史之乱后，玄宗失势，李白经济来源彻底断绝，这也导致他晚年生活困苦，最终病逝当涂。
</p>
</div>
</div>
</section>
<!-- 诗作展示 -->
<section class="mb-16">
<div class="text-center mb-10">
<h2 class="text-2xl 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 lg:grid-cols-3 gap-6">
<div class="poem-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="bg-primary text-white p-4">
<h3 class="text-xl font-bold">《将进酒》</h3>
<p class="text-sm opacity-80">创作于洛阳，744年</p>
</div>
<div class="p-5">
<p class="mb-2">君不见黄河之水天上来，奔流到海不复回。</p>
<p class="mb-2">君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p class="mb-2">人生得意须尽欢，莫使金樽空对月。</p>
<p class="mb-2">天生我材必有用，千金散尽还复来。</p>
<button class="mt-4 text-primary hover:text-primary/80 transition-colors duration-200">
阅读全文 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
<div class="poem-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="bg-primary text-white p-4">
<h3 class="text-xl font-bold">《梦游天姥吟留别》</h3>
<p class="text-sm opacity-80">创作于天台山，745年</p>
</div>
<div class="p-5">
<p class="mb-2">海客谈瀛洲，烟涛微茫信难求；</p>
<p class="mb-2">越人语天姥，云霞明灭或可睹。</p>
<p class="mb-2">天姥连天向天横，势拔五岳掩赤城。</p>
<p class="mb-2">天台四万八千丈，对此欲倒东南倾。</p>
<button class="mt-4 text-primary hover:text-primary/80 transition-colors duration-200">
阅读全文 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
<div class="poem-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="bg-primary text-white p-4">
<h3 class="text-xl font-bold">《早发白帝城》</h3>
<p class="text-sm opacity-80">创作于流放归来途中，759年</p>
</div>
<div class="p-5">
<p class="mb-2">朝辞白帝彩云间，千里江陵一日还。</p>
<p class="mb-2">两岸猿声啼不住，轻舟已过万重山。</p>
<button class="mt-4 text-primary hover:text-primary/80 transition-colors duration-200">
阅读全文 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
</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-serif 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() {
// 初始化地图和时间线动画
setTimeout(() => {
document.querySelectorAll('.timeline-content').forEach((item, index) => {
setTimeout(() => {
item.style.opacity = '1';
item.style.transform = 'translateX(0)';
}, 300 * index);
});
}, 500);
// 时间线交互
const timelineItems = document.querySelectorAll('.timeline-item');
const locationDots = document.querySelectorAll('.location-dot');
const locationInfo = document.getElementById('location-info');
const infoTitle = document.getElementById('info-title');
const infoYear = document.getElementById('info-year');
const infoDescription = document.getElementById('info-description');
const infoPoem = document.getElementById('info-poem');
const routePaths = document.querySelectorAll('[id^="route-"]');
// 地点数据
const locations = [
{ id: 1, name: "长安", x: 200, y: 250, period: 1, year: "744年",
description: "李白在此任翰林待诏，因不能见容于权贵，被唐玄宗疏远，最终赐金放还。",
poem: "《翰林读书言怀呈集贤诸学士》：\n览君荆山作，江鲍堪动色。\n清水出芙蓉，天然去雕饰。" },
{ id: 2, name: "洛阳", x: 350, y: 200, period: 1, year: "744年",
description: "李白东行至此，与杜甫首次会面，两人结为忘年交，开启了中国文学史上一段佳话。",
poem: "《将进酒》（节选）：\n君不见黄河之水天上来，奔流到海不复回。\n君不见高堂明镜悲白发，朝如青丝暮成雪。" },
{ id: 3, name: "梁宋", x: 450, y: 150, period: 1, year: "744年",
description: "李白与杜甫、高适在此共游，纵论时局，饮酒赋诗，形成'诗坛铁三角'。",
poem: "《梁园吟》（节选）：\n平台为客忧思多，对酒遂作梁园歌。\n却忆蓬池阮公咏，因吟渌水扬清波。" },
{ id: 4, name: "齐州", x: 550, y: 120, period: 2, year: "744年",
description: "李白在此紫极宫正式受道箓，成为道士，标志其从仕途转向求仙问道。",
poem: "《访道安陵遇盖还为余造真箓，临别留赠》（节选）：\n清水见白石，仙人识青童。\n安陵盖夫子，十岁与天通。" },
{ id: 5, name: "德州", x: 650, y: 180, period: 2, year: "745年",
description: "李白继续在齐鲁大地漫游，寻求精神上的超脱与自由。",
poem: "《古风·其二十四》（节选）：\n大车扬飞尘，亭午暗阡陌。\n中贵多黄金，连云开甲宅。" },
{ id: 6, name: "任城", x: 750, y: 150, period: 2, year: "745年",
description: "李白在此与杜甫第三次会面于东鲁，同访隐士李邕，深化对道教与隐逸生活的追求。",
poem: "《鲁郡东石门送杜二甫》（节选）：\n醉别复几日，登临遍池台。\n何时石门路，重有金樽开。" },
{ id: 7, name: "扬州", x: 800, y: 200, period: 3, year: "745年",
description: "李白南下扬州，这里的繁华与自由让他的诗歌风格更加奔放。",
poem: "《静夜思》：\n床前明月光，疑是地上霜。\n举头望明月，低头思故乡。" },
{ id: 8, name: "会稽", x: 700, y: 300, period: 3, year: "746年",
description: "李白来到会稽，凭吊贺知章墓，追忆故人，感慨人生。",
poem: "《对酒忆贺监二首·其一》：\n四明有狂客，风流贺季真。\n长安一相见，呼我谪仙人。" },
{ id: 9, name: "天台山", x: 600, y: 350, period: 3, year: "747年",
description: "李白在此创作《梦游天姥吟留别》，借仙山意象表达对自由的向往。",
poem: "《梦游天姥吟留别》（节选）：\n安能摧眉折腰事权贵，使我不得开心颜！" },
{ id: 10, name: "金陵", x: 500, y: 400, period: 4, year: "748年",
description: "李白在金陵与崔成甫交游，以诗酒宣泄政治失意，创作《登金陵凤凰台》。",
poem: "《登金陵凤凰台》（节选）：\n凤凰台上凤凰游，凤去台空江自流。\n吴宫花草埋幽径，晋代衣冠成古丘。" },
{ id: 11, name: "宣城", x: 400, y: 450, period: 4, year: "753年",
description: "李白暂居宣城，创作了许多脍炙人口的诗篇，表达对人生的思考。",
poem: "《宣州谢朓楼饯别校书叔云》（节选）：\n弃我去者，昨日之日不可留；\n乱我心者，今日之日多烦忧。" },
{ id: 12, name: "幽州", x: 300, y: 500, period: 5, year: "755年",
description: "李白在此目睹安禄山厉兵秣马，预判安史之乱，但无力干预。",
poem: "《北风行》（节选）：\n燕山雪花大如席，片片吹落轩辕台。\n幽州思妇十二月，停歌罢笑双蛾摧。" }
];
// 显示地点信息
function showLocationInfo(location) {
infoTitle.textContent = location.name;
infoYear.textContent = location.year;
infoDescription.textContent = location.description;
infoPoem.textContent = location.poem;
locationInfo.style.opacity = '1';
}
// 高亮时间段
function highlightPeriod(period) {
// 重置所有时间线和地点
timelineItems.forEach(item => {
item.querySelector('.timeline-dot').style.transform = 'scale(1)';
item.querySelector('.timeline-dot').style.borderColor = 'white';
});
locationDots.forEach(dot => {
dot.setAttribute('r', '5');
dot.setAttribute('fill', '#8C1515');
});
// 高亮当前时间段
const currentTimelineItem = document.querySelector(`.timeline-item[data-period="${period}"]`);
if (currentTimelineItem) {
currentTimelineItem.querySelector('.timeline-dot').style.transform = 'scale(1.5)';
currentTimelineItem.querySelector('.timeline-dot').style.borderColor = '#D4AF37';
}
// 高亮当前时间段的地点
locationDots.forEach(dot => {
if (dot.getAttribute('data-period') == period) {
dot.setAttribute('r', '8');
dot.setAttribute('fill', '#D4AF37');
}
});
// 显示对应路线
routePaths.forEach((path, index) => {
if (index < period) {
path.style.strokeDasharray = '1000 1000';
path.style.strokeDashoffset = '0';
} else {
path.style.strokeDasharray = '1000';
path.style.strokeDashoffset = '1000';
}
});
}
// 时间线点击事件
timelineItems.forEach(item => {
item.addEventListener('click', () => {
const period = item.getAttribute('data-period');
highlightPeriod(period);
// 显示第一个地点信息
const firstLocation = locations.find(loc => loc.period == period);
if (firstLocation) {
showLocationInfo(firstLocation);
}
});
});
// 地点点击事件
locationDots.forEach(dot => {
dot.addEventListener('click', () => {
const locationId = parseInt(dot.id.split('-')[1]);
const location = locations.find(loc => loc.id == locationId);
if (location) {
showLocationInfo(location);
highlightPeriod(location.period);
}
});
});
// 自动播放动画
let currentPeriod = 1;
let animationInterval;
function startAnimation() {
animationInterval = setInterval(() => {
currentPeriod = (currentPeriod % 5) + 1;
highlightPeriod(currentPeriod);
// 显示第一个地点信息
const firstLocation = locations.find(loc => loc.period == currentPeriod);
if (firstLocation) {
showLocationInfo(firstLocation);
}
}, 3000);
}
// 控制按钮
document.getElementById('btn-play').addEventListener('click', startAnimation);
document.getElementById('btn-pause').addEventListener('click', () => {
clearInterval(animationInterval);
});
document.getElementById('btn-reset').addEventListener('click', () => {
clearInterval(animationInterval);
currentPeriod = 1;
highlightPeriod(currentPeriod);
// 显示第一个地点信息
const firstLocation = locations.find(loc => loc.period == currentPeriod);
if (firstLocation) {
showLocationInfo(firstLocation);
}
});
// 初始化显示第一个地点
showLocationInfo(locations[0]);
highlightPeriod(1);
// 自动播放
startAnimation();
// 显示诗作卡片
setTimeout(() => {
document.querySelectorAll('.poem-card').forEach((card, index) => {
setTimeout(() => {
card.classList.add('active');
}, 300 * index);
});
}, 1500);
});
</script>
</body>
</html>
index.html
index.html