HTML5 在线漫画阅读器 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,user-scalable=yes">
<title>妖怪少爷 - 在线漫画阅读器</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0f17;color:#f1f5f9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{position:sticky;top:0;z-index:50;background:rgba(13,15,23,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.09);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.badge{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px}
.title{font-size:16px;font-weight:700;color:#fff}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button{background:rgba(255,255,255,0.08);color:#e2e8f0;border:1px solid rgba(255,255,255,0.14);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:.18s}
button:hover,button.active{background:#ec4899;color:#fff;border-color:#ec4899}
.hero{max-width:920px;margin:16px auto;padding:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;display:flex;gap:18px;align-items:flex-start}
.hero img{width:120px;height:160px;object-fit:cover;border-radius:10px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.45)}
.hero-meta h1{font-size:20px;margin-bottom:6px}
.hero-meta .sub{font-size:13px;color:#94a3b8;margin-bottom:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{background:rgba(236,72,153,0.16);color:#f472b6;padding:2px 8px;border-radius:6px;font-size:11px}
.desc{font-size:13px;line-height:1.6;color:#cbd5e1}
.reader-wrap{max-width:860px;width:100%;margin:0 auto 40px;padding:0 8px;flex:1}
.scroll-mode .page-card{margin-bottom:10px;background:#161925;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.scroll-mode .page-card img{width:100%;height:auto;display:block}
.page-footer{text-align:center;font-size:11px;color:#64748b;padding:4px 0}
.flip-controls{display:none;justify-content:center;align-items:center;gap:14px;margin:14px 0}
.flip-mode .flip-controls{display:flex}
.drawer{display:none;max-width:920px;margin:0 auto 20px;padding:16px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.1)}
.drawer.open{display:block}
.chap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:10px}
.chap-item{padding:8px 10px;background:rgba(255,255,255,0.06);border-radius:8px;font-size:12px;color:#e2e8f0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-item:hover{background:rgba(236,72,153,0.28)}
@media(max-width:600px){.hero{flex-direction:column;align-items:center;text-align:center}.tags{justify-content:center}}
</style>
</head>
<body>
<header>
<div class="brand">
<span class="badge">BILIMANGA · 统一媒体库</span>
<span class="title" id="hdrTitle"></span>
</div>
<div class="controls">
<button id="btnScroll" class="active" onclick="setMode('scroll')">条漫下拉模式</button>
<button id="btnFlip" onclick="setMode('flip')">单页翻页模式</button>
<button onclick="toggleCatalog()">章节目录 (<span id="chapCount">0</span>)</button>
<button onclick="cycleLang()" id="btnLang">繁/簡/EN</button>
</div>
</header>
<section class="hero">
<img id="heroCover" src="" alt="cover">
<div class="hero-meta">
<h1 id="heroTitle"></h1>
<div class="sub" id="heroSub"></div>
<div class="tags" id="heroTags"></div>
<p class="desc" id="heroDesc"></p>
</div>
</section>
<section class="drawer" id="catDrawer">
<h3 style="font-size:14px;margin-bottom:6px">全卷章节目录 (点击切换预览章节)</h3>
<div class="chap-grid" id="chapGrid"></div>
</section>
<div class="reader-wrap scroll-mode" id="readerWrap">
<div class="flip-controls">
<button onclick="stepPage(-1)">◀ 上一页</button>
<span id="pageIndicator" style="font-size:13px;color:#cbd5e1">1 / 1</span>
<button onclick="stepPage(1)">下一页 ▶</button>
</div>
<div id="pagesContainer"></div>
</div>
<script>
const COMIC = {"slug": "bilimanga-1286", "mangaid": "1286", "zh_title": "妖怪少爷", "hant_title": "妖怪少爺", "en_title": "妖怪少爷 (Bilimanga #1286)", "author": "椎桥宽", "tags": ["奇幻", "战斗", "热血", "神鬼", "奇幻冒险", "日本漫画", "漫画", "日漫"], "zh_desc": "奴良陆雄是个外表看来非常普通的中学生，但在他身上流著有妖怪大头领‧鬼混老的四分之一血缘。因为从小就和妖怪们住在一起，所以陆雄非常喜欢妖怪，而且也希望能继承自己的祖父‧鬼混老成为一个优秀的妖怪头领，但在他知道人们对妖怪都非常讨厌后，他的想法因此有所改变。在一次放学的途中，陆雄因故没搭上巴士，那那班巴士却发生意外。为了拯救同学，身为人类的陆雄是否能率领百鬼去救人呢？\n\n📚 作品信息：作者 椎桥宽 · 评分 10 · 共收录 25 卷 / 218 话章节目录与高清彩页/条漫预览。", "hant_desc": "奴良陸雄是個外表看來非常普通的中學生，但在他身上流著有妖怪大頭領‧鬼混老的四分之一血緣。因為從小就和妖怪們住在一起，所以陸雄非常喜歡妖怪，而且也希望能繼承自己的祖父‧鬼混老成為一個優秀的妖怪頭領，但在他知道人們對妖怪都非常討厭後，他的想法因此有所改變。在一次放學的途中，陸雄因故沒搭上巴士，那那班巴士卻發生意外。為了拯救同學，身為人類的陸雄是否能率領百鬼去救人呢？\n\n📚 作品資訊：作者 椎橋寬 · 評分 10 · 共收錄 25 卷 / 218 話章節目錄與高清彩頁/條漫預覽。", "en_desc": "Popular serialized manga '妖怪少爷' (妖怪少爺) by 椎桥宽. Includes 25 volumes and 218 chapters with full online vertical/page-flip web reader.", "pages": ["https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_01.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_02.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_03.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_04.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_05.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1286/page_06.jpg"], "volumes": [{"title_hant": "妖怪少爺 1 魑魅魍魎的主人", "title_zh": "妖怪少爷 1 魑魅魍魉的主人", "cover_id": 2317487, "first_chap_id": 107171, "cover_url": "https://i.motiezw.com/cover/1286/2317487.jpg"}, {"title_hant": "妖怪少爺 2 陸雄，與牛鬼對峙", "title_zh": "妖怪少爷 2 陆雄，与牛鬼对峙", "cover_id": 2317683, "first_chap_id": 107180, "cover_url": "https://i.motiezw.com/cover/1286/2317683.jpg"}, {"title_hant": "妖怪少爺 3 奴良組總會", "title_zh": "妖怪少爷 3 奴良组总会", "cover_id": 2317864, "first_chap_id": 107189, "cover_url": "https://i.motiezw.com/cover/1286/2317864.jpg"}, {"title_hant": "妖怪少爺 4 四國八十八鬼夜行", "title_zh": "妖怪少爷 4 四国八十八鬼夜行", "cover_id": 2318048, "first_chap_id": 107200, "cover_url": "https://i.motiezw.com/cover/1286/2318048.jpg"}, {"title_hant": "妖怪少爺 5 擁有來自闇黑的黑色羽翼妖怪", "title_zh": "妖怪少爷 5 拥有来自暗黑的黑色羽翼妖怪", "cover_id": 2318241, "first_chap_id": 107210, "cover_url": "https://i.motiezw.com/cover/1286/2318241.jpg"}, {"title_hant": "妖怪少爺 6 邪魅出沒的家", "title_zh": "妖怪少爷 6 邪魅出没的家", "cover_id": 2318425, "first_chap_id": 107221, "cover_url": "https://i.motiezw.com/cover/1286/2318425.jpg"}, {"title_hant": "妖怪少爺 7 花開院三兄妹", "title_zh": "妖怪少爷 7 花开院三兄妹", "cover_id": 2318612, "first_chap_id": 107232, "cover_url": "https://i.motiezw.com/cover/1286/2318612.jpg"}, {"title_hant": "妖怪少爺 8 和現在的關聯", "title_zh": "妖怪少爷 8 和现在的关联", "cover_id": 2318800, "first_chap_id": 107242, "cover_url": "https://i.motiezw.com/cover/1286/2318800.jpg"}, {"title_hant": "妖怪少爺 9 遠野‧物語", "title_zh": "妖怪少爷 9 远野‧物语", "cover_id": 2318989, "first_chap_id": 107252, "cover_url": "https://i.motiezw.com/cover/1286/2318989.jpg"}, {"title_hant": "妖怪少爺 10 被黑暗吞沒的古都", "title_zh": "妖怪少爷 10 被黑暗吞没的古都", "cover_id": 2319175, "first_chap_id": 107261, "cover_url": "https://i.motiezw.com/cover/1286/2319175.jpg"}, {"title_hant": "妖怪少爺 11 迷宮‧鳥居之森", "title_zh": "妖怪少爷 11 迷宫‧鸟居之森", "cover_id": 2319359, "first_chap_id": 107271, "cover_url": "https://i.motiezw.com/cover/1286/2319359.jpg"}, {"title_hant": "妖怪少爺 12 鬼太鼓", "title_zh": "妖怪少爷 12 鬼太鼓", "cover_id": 2319545, "first_chap_id": 107281, "cover_url": "https://i.motiezw.com/cover/1286/2319545.jpg"}], "chapters": [{"cid": "107171", "title": "第一幕 魑魅魍魎的主人", "title_zh": "第一幕 魑魅魍魉的主人"}, {"cid": "107172", "title": "第二幕 陸雄，校園夜行", "title_zh": "第二幕 陆雄，校园夜行"}, {"cid": "107173", "title": "第三幕 「兄弟格斥陸雄」", "title_zh": "第三幕 「兄弟格斥陆雄」"}, {"cid": "107174", "title": "第四幕 陸雄之夢", "title_zh": "第四幕 陆雄之梦"}, {"cid": "107175", "title": "第五幕 陸雄，見證清十字團成立", "title_zh": "第五幕 陆雄，见证清十字团成立"}, {"cid": "107176", "title": "第六幕 陸雄，老家探險", "title_zh": "第六幕 陆雄，老家探险"}, {"cid": "107177", "title": "第七幕 陸雄，前往一番街", "title_zh": "第七幕 陆雄，前往一番街"}, {"cid": "107178", "title": "番外篇 駑良組史實錄 總部抗爭篇", "title_zh": "番外篇 驽良组史实录 总部抗争篇"}, {"cid": "107180", "title": "第八幕 陸雄與舊鼠之牙對峙", "title_zh": "第八幕 陆雄与旧鼠之牙对峙"}, {"cid": "107181", "title": "第九幕 陸雄發燒了", "title_zh": "第九幕 陆雄发烧了"}, {"cid": "107182", "title": "第十幕 陸雄，前往妖怪恐怖之旅", "title_zh": "第十幕 陆雄，前往妖怪恐怖之旅"}, {"cid": "107183", "title": "第十一幕 陸雄，留在捩眼山上", "title_zh": "第十一幕 陆雄，留在捩眼山上"}, {"cid": "107184", "title": "第十二幕 陸雄，闹始夜問探索", "title_zh": "第十二幕 陆雄，闹始夜问探索"}, {"cid": "107185", "title": "第十三幕 陸雄，在新月之夜下", "title_zh": "第十三幕 陆雄，在新月之夜下"}, {"cid": "107186", "title": "第十四幕 陸雄，站在捩眼山山項", "title_zh": "第十四幕 陆雄，站在捩眼山山项"}, {"cid": "107187", "title": "第十五幕 陸雄，與牛鬼對峙", "title_zh": "第十五幕 陆雄，与牛鬼对峙"}, {"cid": "107189", "title": "第十六幕 若丸與牛鬼", "title_zh": "第十六幕 若丸与牛鬼"}, {"cid": "107190", "title": "第十七幕 牛鬼所愛的駑良组", "title_zh": "第十七幕 牛鬼所爱的驽良组"}, {"cid": "107191", "title": "第十八幕「可奈，13歲——」", "title_zh": "第十八幕「可奈，13岁——」"}, {"cid": "107192", "title": "第十九幕 可奈與妖怪•雲外鏡", "title_zh": "第十九幕 可奈与妖怪•云外镜"}, {"cid": "107193", "title": "第二十幕 可奈的生日", "title_zh": "第二十幕 可奈的生日"}, {"cid": "107195", "title": "第二十二幕 風的妖坚", "title_zh": "第二十二幕 风的妖坚"}, {"cid": "107196", "title": "第二十三幕 花院流陰陽術", "title_zh": "第二十三幕 花院流阴阳术"}, {"cid": "107197", "title": "第二十四幕 滑瓢的實力", "title_zh": "第二十四幕 滑瓢的实力"}, {"cid": "107198", "title": "番外篇 清十字坚奇偵探團抗爭篇", "title_zh": "番外篇 清十字坚奇侦探团抗争篇"}, {"cid": "107200", "title": "第二十五幕 七人同行", "title_zh": "第二十五幕 七人同行"}, {"cid": "107201", "title": "第二十六幕 四國八十八鬼夜行", "title_zh": "第二十六幕 四国八十八鬼夜行"}, {"cid": "107202", "title": "第二十七幕 袖婉大爺：", "title_zh": "第二十七幕 袖婉大爷："}, {"cid": "107203", "title": "第二十八幕 雲雀與千羽大人", "title_zh": "第二十八幕 云雀与千羽大人"}, {"cid": "107204", "title": "第二十九幕 妖怪•大神 其之①", "title_zh": "第二十九幕 妖怪•大神 其之①"}, {"cid": "107205", "title": "第三十幕 妖怪•大神 其之②", "title_zh": "第三十幕 妖怪•大神 其之②"}, {"cid": "107206", "title": "第三十一幕 妖怪•犬神 其之③", "title_zh": "第三十一幕 妖怪•犬神 其之③"}, {"cid": "107207", "title": "第三十二幕 妖坚•大神 其之④", "title_zh": "第三十二幕 妖坚•大神 其之④"}, {"cid": "107208", "title": "第三十三幕 妖堡•大神 其之⑤", "title_zh": "第三十三幕 妖堡•大神 其之⑤"}, {"cid": "107210", "title": "第三十四幕 妖怪•大神 其之⑥", "title_zh": "第三十四幕 妖怪•大神 其之⑥"}, {"cid": "107211", "title": "第三十五幕 大頭領的四國之旅", "title_zh": "第三十五幕 大头领的四国之旅"}, {"cid": "107212", "title": "第三十六幕 反擊", "title_zh": "第三十六幕 反击"}, {"cid": "107213", "title": "第三十七幕 牛頭馬頭秘密偵查隊 其之①", "title_zh": "第三十七幕 牛头马头秘密侦查队 其之①"}, {"cid": "107214", "title": "第三十八幕 牛頭馬頭秘密偵查隊 其之②", "title_zh": "第三十八幕 牛头马头秘密侦查队 其之②"}, {"cid": "107215", "title": "第三十九幕 牛頭馬頭的歸來", "title_zh": "第三十九幕 牛头马头的归来"}, {"cid": "107216", "title": "第四十幕 百鬼夜行與杯", "title_zh": "第四十幕 百鬼夜行与杯"}, {"cid": "107217", "title": "第四十一幕 百鬼夜行對八十八鬼夜行", "title_zh": "第四十一幕 百鬼夜行对八十八鬼夜行"}, {"cid": "107218", "title": "第四十二幕 擁有來自阁黑的黑S羽翼妖坚", "title_zh": "第四十二幕 拥有来自阁黑的黑S羽翼妖坚"}, {"cid": "107221", "title": "第四十三幕 在阁黑中紛飛的白雪", "title_zh": "第四十三幕 在阁黑中纷飞的白雪"}, {"cid": "107222", "title": "第四十四幕 幹部戰", "title_zh": "第四十四幕 干部战"}, {"cid": "107223", "title": "第四十五幕 魔王小槌", "title_zh": "第四十五幕 魔王小槌"}, {"cid": "107224", "title": "第四十六幕 隱神刑部裡•玉章", "title_zh": "第四十六幕 隐神刑部里•玉章"}, {"cid": "107225", "title": "第四十七幕 野心的終結", "title_zh": "第四十七幕 野心的终结"}, {"cid": "107226", "title": "第四十八幕 邪魅出沒的家 其之①", "title_zh": "第四十八幕 邪魅出没的家 其之①"}, {"cid": "107227", "title": "第四十九幕 邪魅出沒的家 其之②", "title_zh": "第四十九幕 邪魅出没的家 其之②"}, {"cid": "107228", "title": "第五十幕 邪魅出沒的家 其之③", "title_zh": "第五十幕 邪魅出没的家 其之③"}, {"cid": "107229", "title": "第五十一幕 二人的正義", "title_zh": "第五十一幕 二人的正义"}, {"cid": "107230", "title": "番外篇 浮世繪町奇譚", "title_zh": "番外篇 浮世绘町奇谭"}, {"cid": "107232", "title": "第五十二幕 青與黑的戰士", "title_zh": "第五十二幕 青与黑的战士"}, {"cid": "107233", "title": "第五十三幕 懊恼", "title_zh": "第五十三幕 懊恼"}, {"cid": "107234", "title": "第五十四幕 虚假的話語", "title_zh": "第五十四幕 虚假的话语"}, {"cid": "107235", "title": "第五十五幕 互相欺骗", "title_zh": "第五十五幕 互相欺骗"}, {"cid": "107236", "title": "第五十六幕 真面目", "title_zh": "第五十六幕 真面目"}, {"cid": "107237", "title": "第五十七幕 花開院由羅的認同", "title_zh": "第五十七幕 花开院由罗的认同"}, {"cid": "107238", "title": "第五十八幕 妖刀•彌彌切丸 其之① 浮世繪町綺譚 置行崛", "title_zh": "第五十八幕 妖刀•弥弥切丸 其之① 浮世绘町绮谭 置行崛"}]};
let lang = 'zh';
let mode = 'scroll';
let curPage = 0;
function renderMeta() {
const t = lang === 'zh' ? COMIC.zh_title : (lang === 'hant' ? COMIC.hant_title : COMIC.en_title);
const d = lang === 'zh' ? COMIC.zh_desc : (lang === 'hant' ? COMIC.hant_desc : COMIC.en_desc);
document.getElementById('hdrTitle').textContent = t;
document.getElementById('heroTitle').textContent = t;
document.getElementById('heroSub').textContent = `${COMIC.author} · 共 ${COMIC.volumes.length} 卷 / ${COMIC.chapters.length} 话`;
document.getElementById('heroDesc').textContent = d;
document.getElementById('heroCover').src = COMIC.pages[0] || '';
document.getElementById('chapCount').textContent = COMIC.chapters.length;
const tg = document.getElementById('heroTags');
tg.innerHTML = '';
(COMIC.tags || []).forEach(x => {
const s = document.createElement('span');
s.className = 'tag';
s.textContent = x;
tg.appendChild(s);
});
}
function renderCatalog() {
const g = document.getElementById('chapGrid');
g.innerHTML = '';
(COMIC.chapters || []).forEach((c, idx) => {
const d = document.createElement('div');
d.className = 'chap-item';
d.textContent = c.title_zh || c.title;
d.onclick = () => {
curPage = idx % COMIC.pages.length;
if (mode === 'flip') renderPages();
else document.querySelectorAll('.page-card')[curPage]?.scrollIntoView({behavior:'smooth'});
document.getElementById('catDrawer').classList.remove('open');
};
g.appendChild(d);
});
}
function renderPages() {
const wrap = document.getElementById('readerWrap');
wrap.className = 'reader-wrap ' + (mode === 'scroll' ? 'scroll-mode' : 'flip-mode');
const box = document.getElementById('pagesContainer');
box.innerHTML = '';
const list = mode === 'scroll' ? COMIC.pages : [COMIC.pages[curPage]];
list.forEach((url, i) => {
const idx = mode === 'scroll' ? i : curPage;
const card = document.createElement('div');
card.className = 'page-card';
card.innerHTML = `<img src="${url}" loading="lazy" alt="Page ${idx+1}"><div class="page-footer">第 ${idx+1} / ${COMIC.pages.length} 页 · ${COMIC.zh_title}</div>`;
if (mode === 'flip') card.onclick = () => stepPage(1);
box.appendChild(card);
});
document.getElementById('pageIndicator').textContent = `${curPage + 1} / ${COMIC.pages.length}`;
}
function setMode(m) {
mode = m;
document.getElementById('btnScroll').classList.toggle('active', m === 'scroll');
document.getElementById('btnFlip').classList.toggle('active', m === 'flip');
renderPages();
}
function stepPage(delta) {
curPage = (curPage + delta + COMIC.pages.length) % COMIC.pages.length;
renderPages();
}
function toggleCatalog() {
document.getElementById('catDrawer').classList.toggle('open');
}
function cycleLang() {
lang = lang === 'zh' ? 'hant' : (lang === 'hant' ? 'en' : 'zh');
renderMeta();
}
renderMeta();
renderCatalog();
renderPages();
</script>
</body>
</html>
