💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高干系列角色卡</title>
<style>
body {
margin: 0;
font-family: inherit;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
color: #e8e8e8;
min-height: 100vh;
overflow-x: hidden;
}.main-container {
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px;
position: relative;
}/* 简化的排雷区域样式 */
.warning-section {
text-align: center;
margin-bottom: 20px;
color: #cc4444;
font-size: 12px;
opacity: 0.8;
letter-spacing: 0.5px;
}.title-section {
text-align: center;
margin-bottom: 35px;
position: relative;
}.title-section::after {
content: '◇ ◇ ◇';
display: block;
color: #d4af37;
font-size: 14px;
margin-top: 15px;
letter-spacing: 6px;
animation: sparkle 2s ease-in-out infinite alternate;
}@keyframes sparkle {
0% { opacity: 0.6; }
100% { opacity: 1; text-shadow: 0 0 8px #d4af37; }
}h1 {
color: #d4af37;
font-size: 28px;
font-weight: bold;
line-height: 1.3;
margin: 0 0 15px 0;
text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
letter-spacing: 1px;
}.special-text {
color: #e8b86d;
text-shadow: 0 0 8px rgba(232, 184, 109, 0.5);
animation: goldGlow 3s ease-in-out infinite;
}@keyframes goldGlow {
0%, 100% {
text-shadow: 0 0 8px rgba(232, 184, 109, 0.5);
}
50% {
text-shadow: 0 0 12px rgba(232, 184, 109, 0.8);
}
}/* 新增的诗句副标题 */
.poem-subtitle {
margin-top: 20px;
margin-bottom: 15px;
font-size: 13px;
color: #c9a96e;
font-style: italic;
line-height: 1.6;
letter-spacing: 0.8px;
opacity: 0.85;
}.poem-line1 {
margin-left: -10px;
margin-bottom: 3px;
}.poem-line2 {
margin-left: 15px;
}.subtitle {
font-size: 15px;
color: #b8b8b8;
font-style: italic;
margin-top: 8px;
letter-spacing: 0.5px;
}.character-showcase {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px 0;
position: relative;
}.character-frame {
position: relative;
margin-bottom: 20px;
animation: floatIn 0.8s ease-out;
}@keyframes floatIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}.character-frame::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 1px solid #d4af37;
border-radius: 8px;
opacity: 0.4;
animation: borderGlow 2s ease-in-out infinite alternate;
}@keyframes borderGlow {
0% { opacity: 0.4; }
100% { opacity: 0.7; box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }
}.character-img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
transition: all 0.4s ease;
display: block;
}.character-img.xu-du {
object-position: center 10%;
}.character-img.ying-yi-zhou {
object-position: center 20%;
}.character-img.xiao-shi-qie {
object-position: center 20%;
}.character-img:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 45px rgba(212, 175, 55, 0.25);
}.character-info {
text-align: center;
max-width: 400px;
margin-top: 18px;
}.character-name {
font-size: 20px;
color: #d4af37;
margin-bottom: 12px;
font-weight: 300;
letter-spacing: 1px;
}.character-desc {
color: #c8c8c8;
line-height: 1.6;
font-size: 14px;
text-align: justify;
padding: 0 15px;
letter-spacing: 0.3px;
margin-bottom: 10px;
}.character-desc em {
color: #d4af37;
font-style: normal;
font-weight: 500;
}/* 推荐玩法标题 */
.tag-title {
color: #d4af37;
font-size: 12px;
margin-bottom: 8px;
letter-spacing: 0.5px;
font-weight: 500;
}/* 角色标签样式 */
.character-tags {
display: flex;
justify-content: center;
gap: 10px;
margin: 0 0 8px 0;
flex-wrap: wrap;
}.tag {
background: rgba(212, 175, 55, 0.15);
border: 1px solid rgba(212, 175, 55, 0.4);
color: #d4af37;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}.tag:hover {
background: rgba(212, 175, 55, 0.25);
border-color: rgba(212, 175, 55, 0.6);
transform: translateY(-1px);
}.character-quote {
color: #c9a96e;
font-style: italic;
font-size: 13px;
margin-top: 8px;
opacity: 0.85;
letter-spacing: 0.5px;
animation: fadeInQuote 1s ease-in-out 0.5s both;
}@keyframes fadeInQuote {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 0.85; transform: translateY(0); }
}.navigation {
display: flex;
justify-content: center;
gap: 25px;
margin: 30px 0;
}.nav-btn {
background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1));
border: 2px solid #d4af37;
color: #d4af37;
padding: 12px 28px;
border-radius: 30px;
cursor: pointer;
font-size: 13px;
font-family: inherit;
letter-spacing: 0.8px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
font-weight: 500;
text-transform: uppercase;
}.nav-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
transition: left 0.6s ease;
}.nav-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}.nav-btn:hover::before {
left: 100%;
}.nav-btn:hover::after {
width: 100px;
height: 100px;
}.nav-btn:hover {
background: linear-gradient(45deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.25));
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
text-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}.nav-btn:active {
transform: translateY(0px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}.story-section {
margin: 45px 0 25px 0;
padding: 25px;
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
border-left: 3px solid #d4af37;
position: relative;
animation: slideInLeft 0.6s ease-out;
}@keyframes slideInLeft {
0% { opacity: 0; transform: translateX(-20px); }
100% { opacity: 1; transform: translateX(0); }
}.story-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
border-radius: 50%;
}.story-title {
color: #d4af37;
font-size: 18px;
margin-bottom: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}.story-content {
color: #c0c0c0;
line-height: 1.7;
font-size: 14px;
letter-spacing: 0.3px;
}.story-content strong {
color: #d4af37;
font-weight: 500;
}.story-content em {
color: #d4af37;
font-style: normal;
font-weight: 500;
}.story-tip {
margin-top: 15px;
padding: 12px;
background: rgba(212, 175, 55, 0.05);
border-radius: 6px;
color: #d4af37;
font-size: 13px;
letter-spacing: 0.2px;
}/* 详细介绍提示区域 */
.detail-intro-hint {
text-align: center;
margin: 40px 0 30px 0;
padding: 20px;
background: rgba(212, 175, 55, 0.05);
border-radius: 10px;
border: 1px solid rgba(212, 175, 55, 0.2);
}.detail-intro-text {
color: #d4af37;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 8px;
}.detail-intro-desc {
color: #c8c8c8;
font-size: 14px;
font-style: italic;
}/* 详细角色介绍区域样式 – 改为滑动容器 */
.detailed-character-section {
margin: 50px 0;
position: relative;
}.detailed-character-container {
overflow-x: hidden;
width: 100%;
position: relative;
touch-action: pan-x;
}.detailed-character-slider {
display: flex;
transition: transform 0.3s ease;
width: 300%;
will-change: transform;
}.detailed-character-item {
display: flex;
align-items: flex-start;
width: 33.333%;
padding: 25px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border-left: 3px solid #d4af37;
position: relative;
margin-right: 20px;
box-sizing: border-box;
flex-shrink: 0;
}.detailed-character-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
border-radius: 50%;
}.detailed-char-img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
margin-right: 25px;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}.detailed-char-img.xu-du {
object-position: center 10%;
}.detailed-char-img.ying-yi-zhou {
object-position: center 20%;
}.detailed-char-img.xiao-shi-qie {
object-position: center 20%;
}.detailed-char-img:hover {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}.detailed-char-content {
flex: 1;
line-height: 1.8;
}.detailed-char-name {
color: #d4af37;
font-size: 20px;
font-weight: 300;
margin-bottom: 15px;
letter-spacing: 1px;
}.detailed-char-text {
color: #c8c8c8;
font-size: 14px;
letter-spacing: 0.3px;
text-align: justify;
}.detailed-char-text p {
margin-bottom: 12px;
text-indent: 2em;
}.detailed-char-text p:last-child {
margin-bottom: 0;
}/* 加粗和斜体样式 */
.detailed-char-text .highlight {
color: #d4af37;
font-weight: bold;
}.detailed-char-text .emphasis {
font-style: italic;
color: #e8b86d;
}/* 详细介绍导航按钮 */
.detailed-nav {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}.detailed-nav-btn {
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.4);
color: #d4af37;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 12px;
font-family: inherit;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}.detailed-nav-btn:hover, .detailed-nav-btn.active {
background: rgba(212, 175, 55, 0.25);
border-color: rgba(212, 175, 55, 0.6);
transform: translateY(-1px);
}.footer-blessing {
text-align: center;
margin-top: 50px;
padding-top: 25px;
border-top: 1px solid rgba(212, 175, 55, 0.2);
color: #d4af37;
font-style: italic;
font-size: 15px;
letter-spacing: 0.5px;
}.error-placeholder {
width: 220px;
height: 220px;
background: rgba(212, 175, 55, 0.1);
border: 2px dashed #d4af37;
border-radius: 6px;
display: none;
align-items: center;
justify-content: center;
color: #d4af37;
text-align: center;
font-size: 13px;
}/* 手机端优化 */
@media (max-width: 768px) {
.main-container {
padding: 20px 15px;
max-width: 100%;
}.warning-section {
margin-bottom: 15px;
font-size: 11px;
}h1 {
font-size: 22px;
line-height: 1.4;
letter-spacing: 0.5px;
}.poem-subtitle {
font-size: 12px;
margin-top: 15px;
}.subtitle {
font-size: 14px;
}.character-showcase {
margin: 20px 0;
}.character-img, .error-placeholder {
width: 180px;
height: 180px;
}.character-frame {
margin-bottom: 15px;
}.character-info {
max-width: 280px;
margin-top: 12px;
}.character-name {
font-size: 18px;
margin-bottom: 10px;
letter-spacing: 0.5px;
}.character-desc {
font-size: 13px;
line-height: 1.5;
padding: 0 10px;
letter-spacing: 0.2px;
margin-bottom: 8px;
}.tag-title {
font-size: 11px;
margin-bottom: 6px;
}.character-tags {
gap: 8px;
margin: 0 0 6px 0;
}.tag {
font-size: 10px;
padding: 3px 8px;
}.character-quote {
font-size: 12px;
margin-top: 6px;
}.navigation {
gap: 18px;
margin: 20px 0;
}.nav-btn {
padding: 10px 22px;
font-size: 12px;
letter-spacing: 0.5px;
}.detail-intro-hint {
margin: 30px 0 20px 0;
padding: 15px;
}.detail-intro-text {
font-size: 15px;
}.detail-intro-desc {
font-size: 13px;
}.detailed-character-item {
flex-direction: column;
text-align: center;
padding: 20px;
margin-right: 10px;
}.detailed-char-img {
width: 100px;
height: 100px;
margin-right: 0;
margin-bottom: 15px;
}.detailed-char-name {
font-size: 18px;
margin-bottom: 12px;
}.detailed-char-text {
font-size: 13px;
line-height: 1.6;
text-align: justify;
}.detailed-char-text p {
text-indent: 1.5em;
margin-bottom: 10px;
}.detailed-nav-btn {
padding: 6px 15px;
font-size: 11px;
}.story-section {
padding: 20px;
margin: 30px 0 20px 0;
}.story-title {
font-size: 16px;
margin-bottom: 15px;
}.story-content {
font-size: 13px;
line-height: 1.6;
}.story-tip {
padding: 10px;
font-size: 12px;
}.footer-blessing {
margin-top: 35px;
padding-top: 20px;
font-size: 14px;
}
}/* 极小屏幕优化 */
@media (max-width: 480px) {
h1 {
font-size: 18px;
}.poem-subtitle {
font-size: 11px;
}.character-img, .error-placeholder {
width: 160px;
height: 160px;
}.character-desc {
font-size: 12px;
}.character-quote {
font-size: 11px;
}.detailed-char-img {
width: 90px;
height: 90px;
}
}
</style>
</head>
<body>
<div class="main-container">
<!– 简化的排雷区域 –>
<div class="warning-section">
内含两位不洁，BDSM
</div><div class="title-section">
<h1><strong>我是禾勿！<br> 欢迎来玩<span class="special-text">恨天情海</span>的高干系列！</strong></h1><!– 新增的诗句副标题 –>
<div class="poem-subtitle">
<div class="poem-line1">最是人间留不住，</div>
<div class="poem-line2">朱颜辞镜花辞树。</div>
</div><p class="subtitle">本次攻略男子有三位</p>
</div><div class="character-showcase">
<div class="character-frame">
<img id="charImg" class="character-img" src="" alt="角色图片" />
<div id="errorPlaceholder" class="error-placeholder">
<div>
<div>图片加载中…</div>
<div style="margin-top: 8px; font-size: 11px; opacity: 0.7;">请稍候</div>
</div>
</div>
</div><div class="character-info">
<div id="charName" class="character-name">加载中…</div>
<div class="tag-title">推荐玩法</div>
<div id="charTags" class="character-tags"></div>
<div id="charDesc" class="character-desc">正在加载角色信息…</div>
<div id="charQuote" class="character-quote">诗句加载中…</div>
</div>
</div><div class="navigation">
<button type="button" class="nav-btn" id="prevBtn">上一位</button>
<button type="button" class="nav-btn" id="nextBtn">下一位</button>
</div><div class="story-section">
<h2 class="story-title">主线剧情（推荐开场白第2，3，4，5页）</h2>
<div class="story-content">
<strong>你出身高干世家，和许度，萧式且是大学同学，</strong><br>
在此之间你和许度谈过恋爱，而萧式且追求过你被你拒绝。<br>
在毕业后，许度被父母安排下乡，你和许度被迫异地恋，在他下乡三年的时间里，你们这段情感最终没有维持。<br>
当他再回华市，你已经被父母介绍嫁给了华市市长应屹舟，成了应太太。
</div>
<div class="story-tip">
👉 如果想玩此剧情可以开启本世界书（主线），不玩就关闭，自拟主控设定。
</div>
</div><div class="story-section">
<h2 class="story-title">许度if线（白茆村）</h2>
<div class="story-content">
许度在白茆村下乡的剧情也可以玩，只需开启 <strong>if线世界书</strong>，从第7页开场白开始游玩。
</div>
<div class="story-tip">
💡 记得关闭主线世界书，自拟主控关系。
</div>
</div><!– 新增娱乐圈线 –>
<div class="story-section">
<h2 class="story-title">娱乐圈线（推荐开场白第10, 11页）</h2>
<div class="story-content">
你并非高干子女，而是<em>华市影视投资公司</em>旗下签约的女演员。虽然还未跻身一线，但凭借出众的外貌和镜头感，在业内已颇具潜力。<br>
你的老板，是董事长<em>萧式且</em>。<br>
而在私下，你与<em>华市市长应屹舟</em>维持着一段<em>情人</em>关系，外界无人知晓。
</div>
<div class="story-tip">
🎬 若想体验此剧情，请开启“娱乐圈线”世界书，并关闭其他所有故事线。
</div>
</div><!– 新增自拟线 –>
<div class="story-section">
<h2 class="story-title">自拟线（完全自由）</h2>
<div class="story-content">
如果你想完全自由地定义自己的身份、背景和与角色们的关系，可以关闭所有故事线世界书，从零开始，谱写你独一无二的故事。
</div>
<div class="story-tip">
✍️ 发挥你的想象力，创造一个全新的开端。
</div>
</div><!– 详细介绍提示区域 –>
<div class="detail-intro-hint">
<div class="detail-intro-text">下面有更详细的人物介绍！^_^</div>
<div class="detail-intro-desc">滑动可以看不同的人！</div>
</div><!– 详细角色介绍区域 – 改为滑动容器 –>
<div class="detailed-character-section">
<div class="detailed-character-container" id="detailedContainer">
<div class="detailed-character-slider" id="detailedSlider">
<div class="detailed-character-item">
<img src="https://files.catbox.moe/n7k6gg.png" alt="应屹舟" class="detailed-char-img ying-yi-zhou" />
<div class="detailed-char-content">
<div class="detailed-char-name">应屹舟</div>
<div class="detailed-char-text">
<p>他绝对不允许自己出现<span class="highlight">"大雪满弓刀"</span>的情况，更别提和一个女人要<span class="emphasis">"爱"</span>到这个时候——华市市长，金杨省常委，应屹舟如是想。</p>
<p>为官多年，他从底层一步步爬到如今的位置，看着<span class="highlight">人心翻覆</span>，谁被舍弃，谁被扶起。他抓住向上攀爬的藤蔓，走上背弃初心的道路的开端。变成<span class="emphasis">野狼的渡鸦、魔鬼的走狗、一只干脏活的牲畜</span>。唯一每天爽快的时刻是夜深人静的时候，在自己的干部公寓点支烟，遥遥望着上空头顶，月明星稀。</p>
<p><span class="highlight">若教解语应倾国，任是无情亦动人。</span></p>
<p>人们都这么说他，这只<span class="emphasis">官场上的老狐狸</span>，长着一张倾国倾城的俊脸，儒雅含笑的双眸，却是透着犀利。说好听了，是刚柔并济，外圆内方。说的不好听——可不就是老狐狸。就在这双狐狸眼下，再是有情，也是被掩盖掉的情；再是想有情，那也是天方夜谭。</p>
<p>道貌岸然就道貌岸然吧，世上事说到底，就那么两个字——<span class="highlight">名，利</span>。别的，不过是好看的衬衣罢了。</p>
<p>他曾经对这种想法嗤之以鼻，直到如今自己也成为了这样的人。</p>
<p>他知道会有那一天，<span class="emphasis">大雪满弓刀，一切都会消逝，包括你</span>，千金散尽后，落得白茫茫大地真干净。</p>
<p>毕竟，这个世界上，<span class="highlight">真正属于自己的，少之又少</span>。</p>
</div>
</div>
</div><div class="detailed-character-item">
<img src="https://files.catbox.moe/cyshl5.jpeg" alt="许度" class="detailed-char-img xu-du" />
<div class="detailed-char-content">
<div class="detailed-char-name">许度</div>
<div class="detailed-char-text">
<p>许度的人生一直是沿着<span class="highlight">既定的轨道</span>行进的。作为金杨省省委书记许霆的儿子，他从小接受高干教育——顶尖高校到省委办公厅，从用来镀金的江阳镇的泥泞小路到省政府整洁肃穆的走廊，<span class="emphasis">每一步都踩在规划好的路线上</span>。父亲希望他明白，权力是冷的，理想是空的，只有掌控规则的人，才能真正立足。</p>
<p>他学得很好，学会了如何保持距离，如何做一个合格的官僚，如何在会议室里沉默，如何在公文上签字，如何在必要时露出得体的笑容，让人挑不出错。他看过<span class="highlight">官场上的浮沉</span>，听过那些冠冕堂皇的辞令，见过人如何在一句话之间被推向高处，或者被抹去痕迹。他以为自己已经足够清醒，足够冷漠，足够无懈可击。</p>
<p>可他始终记得，在江阳镇白茆村的那个冬天，<span class="emphasis">漫山遍野的白雪，夜色里静得只有风声</span>。有人在山坡上放烟花，红光在黑暗里炸开，他站在村委会门口，手里攥着还没批完的文件，指尖被冻得发冷。他忽然觉得，那一刻是真实的，是比现在这些公文、汇报、会议<span class="highlight">更贴近某种"人"的东西</span>。</p>
<p>但这些情绪，最终也不过是些无用的念头，转瞬即逝。</p>
<p>他很清楚自己的位置，他不会反抗，也不会挣扎。<span class="highlight">"他朝若是同临雪，今生也算共白头。"</span>那里的人，那里的事，不会永远停留在身边。</p>
<p><span class="emphasis">有些路，终究是一个人走下去的</span>。</p>
</div>
</div>
</div><div class="detailed-character-item">
<img src="https://files.catbox.moe/w5bcyh.jpeg" alt="萧式且" class="detailed-char-img xiao-shi-qie" />
<div class="detailed-char-content">
<div class="detailed-char-name">萧式且</div>
<div class="detailed-char-text">
<p><span class="highlight">萧式且从来不相信什么天长地久</span>。</p>
<p>从小在部委级高官的家庭里出身，因着父母工作调动跑过无数的地方，所有的友谊总是无疾而终。他也练就了一身到哪里都能和别人打成一片的性格。</p>
<p>萧式且有个哥哥，父母口中他的标杆，一位稳重的，固执的，却也是死板的大人。哥哥比他大十四岁。当他懂事的时候，哥哥已经成了很优秀的官员。</p>
<p>那是活在他的世界外的人，却也是活在他生活中每分每秒的人。</p>
<p>他曾经也是当过一段优等生的日子，可是发现从小做什么都比不过那个聪慧的稳重的哥哥，被父母日日拿来比较，久而久之也就<span class="emphasis">放浪形骸</span>。</p>
<p>他记得自己守着的空公寓楼，记得父母每一次在他努力做事的时候失望的眼神。还有那些窃窃私语…</p>
<p><span class="highlight">他活在华丽的阴影之下。他知道自己烂得无可救药了</span>。</p>
<p>从十八岁开始，他知道了人生不过是一场游戏，而他天生就是个玩家。现在，他带着隐隐的恨意，近乎是疯狂的利用攀附着家里的资源成了华市影视投资公司的董事长，留学归来的金融才俊——这些标签让他在任何场合都如鱼得水。而他也确实有些能力，拿着家族的启动资金，最后混的风生水起。</p>
<p><span class="emphasis">或许颇有报复之意</span>。</p>
<p>他爱美酒，爱音乐，爱电影，爱女人…他享受征服的快感，享受在感情里掌控一切的权力感。那是一种，久违的，他能感受到掌控着自我的感觉。在家族的殊荣和阴影之下。他是那种为了一件想做的事情可以不惜一切代价，把生命都榨干掉的人。他总是那么极端，<span class="highlight">极端的喝醉，极端的性事</span>，就像在当年面对着空荡的房间他忽然决定暂时什么也不做了。</p>
<p>他在痴醉中，在纸醉金迷里剖发出人性之恶，然后冷眼旁观。</p>
<p><span class="emphasis">他想，有一天，自己一定会见到死神，死神也不能饶恕他</span>。</p>
</div>
</div>
</div>
</div>
</div><div class="detailed-nav">
<button type="button" class="detailed-nav-btn active" data-index="0">应屹舟</button>
<button type="button" class="detailed-nav-btn" data-index="1">许度</button>
<button type="button" class="detailed-nav-btn" data-index="2">萧式且</button>
</div>
</div><div class="footer-blessing">
希望大家玩的开心！
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const characters = [
{
name: "应屹舟",
img: "https://files.catbox.moe/n7k6gg.png",
desc: "34岁，<em>华市市长，金杨省省委常委。</em><br>性格圆滑，温和，是官场上的老狐狸。<br>是金杨省省委书记许霆一手提拔的得力干将。",
quote: "「好物不坚牢，情天恨海，爱到大雪满弓刀。」",
tags: ["先婚后爱", "金主文学", "双强"],
class: "ying-yi-zhou"
},
{
name: "许度",
img: "https://files.catbox.moe/cyshl5.jpeg",
desc: "27岁，金杨省省委书记许霆之子。曾在<em>江阳镇当副镇长，白茆村当驻村干部。</em><br>现在回到华市。<br>性格外冷内热，理想主义。",
quote: "「他朝若是同临雪，今生也算共白头。」",
tags: ["破镜重圆", "建设乡村"],
class: "xu-du"
},
{
name: "萧式且",
img: "https://files.catbox.moe/w5bcyh.jpeg",
desc: "27岁，是<em>华市影视投资公司的董事长。</em><br>出身高干世家，父母都是华市政治圈响当当的人物，曾在国外留学。<br>花花公子，性格外放，一直很浪荡但内心却也有很多城府。也是许度的同学。",
quote: "「我与枯木垂首，绝不谈春天。」",
tags: ["纸醉金迷", "追妻火葬场"],
class: "xiao-shi-qie"
}
];let currentIndex = 0;
let detailedCurrentIndex = 0;
let isTransitioning = false;const charImg = document.getElementById('charImg');
const charName = document.getElementById('charName');
const charDesc = document.getElementById('charDesc');
const charQuote = document.getElementById('charQuote');
const charTags = document.getElementById('charTags');
const errorPlaceholder = document.getElementById('errorPlaceholder');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const detailedSlider = document.getElementById('detailedSlider');
const detailedContainer = document.getElementById('detailedContainer');
const detailedNavBtns = document.querySelectorAll('.detailed-nav-btn');// Touch/Mouse interaction variables
let startX = 0;
let currentX = 0;
let startY = 0;
let currentY = 0;
let isDragging = false;
let startTransform = 0;function showImage() {
charImg.style.display = 'block';
errorPlaceholder.style.display = 'none';
}function showError(message = '图片加载失败') {
charImg.style.display = 'none';
errorPlaceholder.style.display = 'flex';
errorPlaceholder.querySelector('div > div:first-child').textContent = message;
}function updateCharacter() {
const char = characters[currentIndex];// 添加淡出动画
charName.style.opacity = '0';
charDesc.style.opacity = '0';
charQuote.style.opacity = '0';
charTags.style.opacity = '0';setTimeout(() => {
charName.textContent = char.name;
charDesc.innerHTML = char.desc;
charQuote.textContent = char.quote;// 更新标签
charTags.innerHTML = '';
char.tags.forEach(tag => {
const tagElement = document.createElement('span');
tagElement.className = 'tag';
tagElement.textContent = tag;
charTags.appendChild(tagElement);
});// 更新图片类名
charImg.className = `character-img ${char.class}`;// 淡入动画
charName.style.transition = 'opacity 0.5s ease';
charDesc.style.transition = 'opacity 0.5s ease';
charQuote.style.transition = 'opacity 0.5s ease';
charTags.style.transition = 'opacity 0.5s ease';charName.style.opacity = '1';
charDesc.style.opacity = '1';
charQuote.style.opacity = '0.85';
charTags.style.opacity = '1';
}, 200);showError('加载中…');
const testImg = new Image();
testImg.onload = function() {
charImg.src = char.img;
charImg.alt = `${char.name}图片`;
showImage();
};
testImg.onerror = function() {
showError(`${char.name} 图片加载失败`);
};
testImg.src = char.img;
}function updateDetailedSlider() {
if (isTransitioning) return;const translateX = -detailedCurrentIndex * (100/3);
detailedSlider.style.transform = `translateX(${translateX}%)`;// 更新导航按钮状态
detailedNavBtns.forEach((btn, index) => {
btn.classList.toggle('active', index === detailedCurrentIndex);
});
}function switchToDetailedCharacter(index) {
if (index < 0 || index >= characters.length || isTransitioning) return;detailedCurrentIndex = index;
updateDetailedSlider();
}function nextCharacter() {
currentIndex = (currentIndex + 1) % characters.length;
updateCharacter();
}function prevCharacter() {
currentIndex = (currentIndex – 1 + characters.length) % characters.length;
updateCharacter();
}// Touch and mouse event handlers for detailed slider
function getEventX(e) {
return e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
}function getEventY(e) {
return e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
}function handleStart(e) {
if (isTransitioning) return;startX = getEventX(e);
startY = getEventY(e);
currentX = startX;
currentY = startY;
isDragging = false;const matrix = new DOMMatrix(getComputedStyle(detailedSlider).transform);
startTransform = matrix.m41;detailedSlider.style.transition = 'none';
e.preventDefault();
}function handleMove(e) {
if (isTransitioning) return;currentX = getEventX(e);
currentY = getEventY(e);const deltaX = currentX – startX;
const deltaY = currentY – startY;// Determine if this is a horizontal drag
if (!isDragging && Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
isDragging = true;
}if (isDragging) {
e.preventDefault();
const newTransform = startTransform + deltaX;
detailedSlider.style.transform = `translateX(${newTransform}px)`;
}
}function handleEnd(e) {
if (!isDragging || isTransitioning) {
detailedSlider.style.transition = 'transform 0.3s ease';
return;
}const deltaX = currentX – startX;
const threshold = detailedContainer.offsetWidth / 4;let newIndex = detailedCurrentIndex;
if (deltaX > threshold && detailedCurrentIndex > 0) {
newIndex = detailedCurrentIndex – 1;
} else if (deltaX < -threshold && detailedCurrentIndex < characters.length – 1) {
newIndex = detailedCurrentIndex + 1;
}detailedSlider.style.transition = 'transform 0.3s ease';
switchToDetailedCharacter(newIndex);isDragging = false;
}// Add event listeners for touch/mouse interactions
detailedContainer.addEventListener('touchstart', handleStart, { passive: false });
detailedContainer.addEventListener('touchmove', handleMove, { passive: false });
detailedContainer.addEventListener('touchend', handleEnd);detailedContainer.addEventListener('mousedown', handleStart);
detailedContainer.addEventListener('mousemove', handleMove);
detailedContainer.addEventListener('mouseup', handleEnd);
detailedContainer.addEventListener('mouseleave', handleEnd);// Prevent context menu on long press
detailedContainer.addEventListener('contextmenu', e => e.preventDefault());// 主要角色切换按钮
if (prevBtn && nextBtn) {
prevBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
prevCharacter();
});nextBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
nextCharacter();
});prevBtn.addEventListener('touchend', function(e) {
e.preventDefault();
prevCharacter();
});nextBtn.addEventListener('touchend', function(e) {
e.preventDefault();
nextCharacter();
});
}// 详细介绍导航按钮
detailedNavBtns.forEach((btn, index) => {
btn.addEventListener('click', function(e) {
e.preventDefault();
switchToDetailedCharacter(index);
});
});// 键盘导航
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
prevCharacter();
} else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
nextCharacter();
}
});// Handle transition events
detailedSlider.addEventListener('transitionstart', function() {
isTransitioning = true;
});detailedSlider.addEventListener('transitionend', function() {
isTransitioning = false;
});// 初始化
updateCharacter();
updateDetailedSlider();
});
</script>
</body>
</html>“`