也曾年轻 发表于 2025-12-1 22:53

连环画 --- 西汉演义

本帖最后由 也曾年轻 于 2025-12-2 08:57 编辑 <br /><br />封面页点击选择故事，鼠标左右键前后翻页
<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
#oBlk        {width:1240px;height:600px;border:thin red solid;
        background-image: url(https://z3.ax1x.com/2021/09/16/4nMjJA.gif);
        display: grid;margin:80px auto 40px calc(50% - 701px);
        place-items:center;position:relative;
        grid-template-rows: 100%;
        grid-template-columns:300px 940px;
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:24px;
        font-size:12px;padding:10px;
}
#pichold        {width:270px;position:absolute;left:0px;top:0px;animation: mup 90s linear infinite paused;}
#pichold img        {width:270px;height:170px;margin:2px auto;cursor:pointer;}
#pichold:hover        {animation-play-state: running;}
#targetD        {display:grid;place-items:center;}
#ifd        {width:920px;height:550px;}
@keyframes        mup        {to {top:-3132px;}}
</style>
<div id="oBlk">
<div style="padding:4px;height:580px;width:270px;overflow:hidden;position:relative;"><div id="pichold"></div></div>
<div id="targetD">
<span id="gName" style="font:bold 2em 隶书;color:brown;">《博浪椎》</span>
        <iframe src="https://file.uhsea.com/2512/255bde16820d0ffe6a19dd27a910378bI8.html?idx=0" scrolling='no' frameborder='1' id="ifd"></iframe>
</div>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mfJwcJFE3lZaxR60uKKfXG4UeKZVvmtO0d6gZWBj04OqDQYuPicLP28Q/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShWNODs7icgx4M7KU5Os9niajcLdrT7Gtfn2k02cW3iaNKSb368ARU6GQFh8cibLE6kzpIobMZE1oqOmQ/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShWNODs7icgx4M7KU5Os9niajkMRpvs7b0K5KBLeKkCH6CtzIxcmEZ9hDUSzYjKXFGEHxRibM4A9CicAA/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgE4Tg4wjTNPsLlJSMMP20QwnOyz656pGfaZC5cqftgzQmTnNor8NS0VNYNu47QPB0wcODbTteicIQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShIMTvXWxGxviaY2mucYfZBsyWgEAAPA4mFmicTlR8AL5FUjsKia2hP7IqqiccgX0ibcltfcfzje0mLX9A/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mLiaXQjeJpc7JUZxudK7k5NlcbLFzW3xlJyzljFgTaK7MxaxrehQufCQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShIMTvXWxGxviaY2mucYfZBsHH1lbahiaBuFYMMjvLLsXVFEceHFDanJK3gjmvuODAAG94Oth3TwllA/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShzm1yKqXNnhmacN1Ur0oX7Pr7g8yib2scAeibnTl1tHDnAk43JEXw5xDNotCkxJfFOE5hny3IHRetA/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjwL2fkn4BQ7ACApNq9Cy9sB29ozlTxB8JOjWFNnsyPKUg9m3lvY1syFmcY1rXrYl7YicobNVibduQA/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjwL2fkn4BQ7ACApNq9Cy9seictxDfibZj1kSvV1IjEf3Z2yiahuA2hfk7vNekzWNjicYAs3y0Azhoo9Q/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mO0zdoH5lMIV5pq3QVz5XmuCf1XO9LakDjh9ujYp63DJ1B7rO4Rd3bQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShR5rCdWMSlmMAibxOkAXqh37e5Sjaic3ibDwM57tyVGBYVBcA7b7C1DOsz9t6VrQicyq6NTjKmK91mwA/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShR5rCdWMSlmMAibxOkAXqh3XX8JFQQuBQDNcbBKLL96zOD24Hic9blIGh7zsBZb5MUmq8ZJlFok8NA/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mbnvvyWVB1yQKFhcicB0nibtVI417a9mSVlJd7dvJ3FIpInKMw8R7GmFQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3md31qicuYt2Uj2f7PJ44cUdhwRKSROib6ACNoZ645M5t4RJEhj3xdklOA/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3m6iadvpjdmLBWNSe67nNMTa0lzTcNoTZ8UcmElMofIk9aF0O3OezEgHQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mU9wMQBosC1ichSC84G4kRN0HLicnhHneFVluv3ZphGBIvhW0YibOiaCzMg/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mHIkpOxGbUcfFnXuniarzDiaOtbLc44BGibiahZeUZyfmTUg8W9PsqwiaotA/640",       

"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjWI49ZdNdV9aLqKV9jrv3mfJwcJFE3lZaxR60uKKfXG4UeKZVvmtO0d6gZWBj04OqDQYuPicLP28Q/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShWNODs7icgx4M7KU5Os9niajcLdrT7Gtfn2k02cW3iaNKSb368ARU6GQFh8cibLE6kzpIobMZE1oqOmQ/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShWNODs7icgx4M7KU5Os9niajkMRpvs7b0K5KBLeKkCH6CtzIxcmEZ9hDUSzYjKXFGEHxRibM4A9CicAA/640",       
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgE4Tg4wjTNPsLlJSMMP20QwnOyz656pGfaZC5cqftgzQmTnNor8NS0VNYNu47QPB0wcODbTteicIQ/640",               
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShIMTvXWxGxviaY2mucYfZBsyWgEAAPA4mFmicTlR8AL5FUjsKia2hP7IqqiccgX0ibcltfcfzje0mLX9A/640",       
];
const gsName = ["《博浪椎》","《陈胜王》","《芒砀山》","《项梁起义》","《指鹿为马》","《鸿门宴》","《项羽背约》","《追韩信》","《暗度陈仓》","《智下三秦》","《夺彭城》","《气英布》","《破魏灭赵》","《战荥阳》","《计复成皋》","《自称齐王》","《广武山》","《乌江自刎》"];
pics.forEach((pic,idx) => {
        let imgObj = document.createElement('img');
        imgObj.src = pic;
        imgObj.dataset.idx = idx % 18;
        pichold.appendChild(imgObj);
});
pichold.querySelectorAll('img').forEach( imgObj => {
        imgObj.onclick = () => {
                let selIdx = imgObj.dataset.idx;
                gName.innerHTML = gsName;
                ifd.src = `https://file.uhsea.com/2512/255bde16820d0ffe6a19dd27a910378bI8.html?idx=${selIdx}`;
        }
});
</script>

小文 发表于 2025-12-2 10:24

十分喜欢，欣赏好贴！{:4_204:}

也曾年轻 发表于 2025-12-2 10:37

小文 发表于 2025-12-2 10:24
十分喜欢，欣赏好贴！

谢谢欣赏支持！

红影 发表于 2025-12-2 12:19

从第一个博浪椎到第十八的乌江自刎，共18本故事书，这么多，足够看过瘾了。
感谢也曾年轻老师的好帖{:4_199:}

红影 发表于 2025-12-2 12:20

这个更好了，不会另外跳转，直接就在帖子里，选到哪个故事，就能直接阅读了，真方便{:4_187:}

红影 发表于 2025-12-2 12:23

这么多的故事，把那段历史搬到了人们眼前。

红影 发表于 2025-12-2 12:24

没事可以在这里看故事书了，搬个小板凳，坐下来，细细阅读{:4_204:}

也曾年轻 发表于 2025-12-2 13:31

红影 发表于 2025-12-2 12:19
从第一个博浪椎到第十八的乌江自刎，共18本故事书，这么多，足够看过瘾了。
感谢也曾年轻老师的好帖{:4_19 ...

谢谢支持！

也曾年轻 发表于 2025-12-2 13:32

红影 发表于 2025-12-2 12:20
这个更好了，不会另外跳转，直接就在帖子里，选到哪个故事，就能直接阅读了，真方便

跳转再返回不直观。

也曾年轻 发表于 2025-12-2 13:33

红影 发表于 2025-12-2 12:23
这么多的故事，把那段历史搬到了人们眼前。

这个只有18集，四大名著的小人书更多集。

红影 发表于 2025-12-2 23:36

也曾年轻 发表于 2025-12-2 13:31
谢谢支持！

谢谢您的好帖，这个太棒了{:4_187:}

红影 发表于 2025-12-2 23:36

也曾年轻 发表于 2025-12-2 13:32
跳转再返回不直观。

是的，还是这样直接阅读的好{:4_187:}

红影 发表于 2025-12-2 23:38

也曾年轻 发表于 2025-12-2 13:33
这个只有18集，四大名著的小人书更多集。

这么多已经够看好长时间了，没想到还有那么多{:4_187:}

也曾年轻 发表于 2025-12-3 07:55

红影 发表于 2025-12-2 23:38
这么多已经够看好长时间了，没想到还有那么多

做成帖子代码简单但数据量有点大，费时间磨。

小九 发表于 2025-12-3 19:30

仿佛又回到看小人书的年代{:4_199:}

也曾年轻 发表于 2025-12-3 21:00

小九 发表于 2025-12-3 19:30
仿佛又回到看小人书的年代

以前是纸版的，现在是电子版的{:5_106:}

谢谢欣赏支持！ 晚上好！

小辣椒 发表于 2025-12-5 21:46

哇塞，厉害，精彩的特效代码制作{:4_178:}

也曾年轻 发表于 2025-12-5 22:42

小辣椒 发表于 2025-12-5 21:46
哇塞，厉害，精彩的特效代码制作

谢谢支持欣赏！

晚上好！

梦江南 发表于 2025-12-6 15:37

老师的作品我怎么看不到呢？

也曾年轻 发表于 2025-12-6 17:49

梦江南 发表于 2025-12-6 15:37
老师的作品我怎么看不到呢？

还是因为屋舍的原因，以后尽量避免使用它。
页: [1] 2
查看完整版本: 连环画 --- 西汉演义