连环画 --- 水浒传

也曾年轻 发表于 2025-12-6 20:00

本帖最后由也曾年轻于 2025-12-6 19:57 编辑 <br /><br /><meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
#oBlk {width:1240px;height:700px;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 62s linear infinite paused;}
#pichold img {width:270px;height:203px;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:-6212px;}}
/*-----------------------------------------------------------*/
#storyBookBlk {
--w:768px;--h:576px;
width:var(--w);
height:calc(var(--h));
overflow:hidden;
border-radius:24px;
box-shadow:4px 4px 10px black;
position:relative;
margin:8px auto;

}
#imgHold {
width:calc(126 * var(--w));
position:absolute;
left:0px;left:0px;
z-index:8;

}
#imgHold img {width:var(--w);height:var(--h);float:left;}
#targetD {position:relative; width:920px;height:666px;border:5px white groove;}
</style>
<div id="oBlk">
<div style="padding:4px;height:664px;width:270px;overflow:hidden;position:relative;border:4px white groove;"><div id="pichold"></div></div>
<div id="targetD">
<span id="gName" style="font:bold 2.5em 隶书;color:brown;margin-top:12px;">《九纹龙史进》</span>

<div id="storyBookBlk">
<div id="imgHold">
</div>
</div>
</div>
</div>
<audio id="audObj" src="https://music.163.com/song/media/outer/url?id=1298514998.mp3" loop autoplay />
<script>
audObj.volume = 0.1;
const imgs = [
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6hqwYs1TrUzCj5R4lwoZYArIzib7AENQic1MJsH0p2kTTUnRCr1ujdkvw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6BEr6Rgf80HxnQAJlcboKP7DcVrtYccucTN5MxOuA0yfwDVXicytoBxg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6bt7vgLCmamINp06WcCuaHMiaJUzzkEyIgzH3nLzMnib3I0X99ERsmSbw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiaaPRTgcE0PFqt5t6qdvQEVddHXXa0dwd8AAMQyIiaRrzgDiaeXC4fko8Kibf7icZLQRrwhGdia02fX0SQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSh35awH8QSibxrxxu75rrcRJibp3fAyxW26YAWL1jcjBxcBx4IiakRlfSkAFqONAwTlaXgQZTlhFOeBg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSh35awH8QSibxrxxu75rrcRJ0MS25NVT35blnO88Eb0aU6DPcEpX9Zxgz9MHM8lCh9wv3TycXGMgww/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSh35awH8QSibxrxxu75rrcRJTZgboaOgE4XdP8gf307SKAN21aqLFiaOictTZUdAickW3CYOCM031YV5A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiaawKTTzC7PSSmqykCsCBBaxPibia4F3107XSF6PicdtwHJZG4zJltgtV9jtjXY6cgxGBfRMA6X15ZXA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSh7YvNibNSatt5AVXjBgQVTzyAR6uBA7qHtPFZTGHicVsGHLRoFicl4g0AG7Ws6XSkFkWkDbeszPAmPQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSh7YvNibNSatt5AVXjBgQVTzV8Oee44OqibXJNS4xbM6MuIsPiaARq4r7krpJNTzphGRkDY8b5HR9NHQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgEAqBfJXmP4gjqcaePqjOn8VnXouI8atzn62aQ7tpgPGHcgakKdEicKSziacicwj8P8OUXerbicvdeicQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShY17Mwcmm8gI4Kkw5uFupibYsbSwx5pEMo5XmDNnm3Cam5sUdNSnJHCn2KsVHvIZKLTdaJpJ3f3KQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShY17Mwcmm8gI4Kkw5uFupib3XdAALpYzK49cRoibXLtLp5rEBW0Ewsj0K1OjyoIFJfTmp1r81S8PxA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShZxKsWiau5Uw5g7nKBBicmiaQPxOzdcCwztgm0BatibkP2doy6zlPFXsVrecY9iaVfPGvXNu90plQsYNw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiaPQscGzdOUmcXI0GmUErKpsg2iaGMNnJyVnia1AwTbnCvtRibSOZv9YhSuXiaiaWc32aahxqtsribD7cKQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiaPQscGzdOUmcXI0GmUErKpufJ8bOBP0xlbtMlGFKsF4cLTcJUH3sgr12gLQicqoVoyZiaGx2WcoDxQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiapoVF4xuQIicicLmrlkR4u2pLcic2IwaO7ZEicFxMcWfy5QC2TrgicgKKCSPfdReDibxfoIt9b2JETia6sg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiapoVF4xuQIicicLmrlkR4u2pfHRAzxeCn3JWHVhpric4E8XRTxF7HcHq7Aq9sDp8ic8uDVD2bhVyBLeQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiapoVF4xuQIicicLmrlkR4u2pcUjibMPWv1quzT9braH94yVP9cXib9FFxqrCN2pfia7m8k694m6cwo5UA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjtqBKHQYtTfw3DwWtyZsicib4gOXSESYeQgAAElYjqEibiaJHzwQh9Ccfen4nyddjlicTVposMXwAbmSg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShrHobPkic23oib3xKblibDBOmbcy0rvGRicIicnyHNjY5sPtUJyq1wiceyrZqjXibjX2ne9sjMbhh3sQrnA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShrHobPkic23oib3xKblibDBOmsOZsbtz6OvRv5TZ0KJrhUh70Es3Jz4IXExiajqGb2D0hRoyWRGmdoSg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShrHobPkic23oib3xKblibDBOmlnSHG2WIH6GJgZocwaULTqmBIb72FyVvdMU1PkBk4cYk24s5WDNStQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSg2CFUYjxsN0bNF2WbqpB4vxfKVf4ZayOSnqZMf11clv0Fp35YciacicWHzxFjjtCayDxtkSjygIfSQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSg2CFUYjxsN0bNF2WbqpB4vT9IrYr0B0mqboVI6piaEIA8xLNRMSjV22Qa4bSpxvEmrWBNkUIIXmog/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjGNTgphicJFMPuCGB6IN44iaStib4lsBicjzbaGVkorpTBaQopfu9bICNRHVZJbupibia3lnOicvW38WZ8A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSjviaZgU84icTvMsG8aH6WBSGMIDeCxchUmptZcnBBicGA3VcqcF5T5GVcdb3RYaVNtQbkeuIQ4apaiag/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgAH02u1dVXt8JUsdl9jD50Meet1G4a1t3JGDOhCD0Ky8aNPUibTSz0dPNIu26AsDL8NeKRxJAiaadQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgAH02u1dVXt8JUsdl9jD505ZKgJ8jf60qb7vDAMS64NmSeQ5xibmZmVsbLMmvP1ibxibQClw3f5U5iaw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSgAH02u1dVXt8JUsdl9jD50gleTbzyhLYmibbtT4w7akOY1OKux7kXPsmBdKQDqZ5cIGguUarA0J5g/640",
/*-----------------------------------------------------------------------------------------------------------------------*/
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6hqwYs1TrUzCj5R4lwoZYArIzib7AENQic1MJsH0p2kTTUnRCr1ujdkvw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6BEr6Rgf80HxnQAJlcboKP7DcVrtYccucTN5MxOuA0yfwDVXicytoBxg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcShgrxknHoR8GLQT5qdibO2M6bt7vgLCmamINp06WcCuaHMiaJUzzkEyIgzH3nLzMnib3I0X99ERsmSbw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Y3VM8gAWcSiaaPRTgcE0PFqt5t6qdvQEVddHXXa0dwd8AAMQyIiaRrzgDiaeXC4fko8Kibf7icZLQRrwhGdia02fX0SQ/640",
];
const gsName = [
"《九纹龙史进》","《鲁智深》","《野猪林》","《林冲雪夜上梁山》","《杨志卖刀》","《智取生辰纲》","《石碣村》","《宋江杀惜》","《狮子楼》","《快活林》","《清风寨》",
"《闹江洲》","《李逵下山》","《三打祝家庄》","《高唐州》","《大破连环马》","《三山聚义》","《闹华山》","《大名府》","《曾头市》","《英雄排座次》","《李逵闹东京》",
"《燕青打擂》","《黑旋风扯诏》","《两破童贯》","《三败高俅》","《受招安遭陷害》","《破辽国徒劳无功》","《征方腊损兵折将》","《蓼儿洼》"];

var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/a780b35311e28a1b88d39618c12d9387.js";
//sf1.src='./水浒传pic.js';

sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {
// 加载封面图片
imgs.forEach((pic,idx) => {
let imgObj = document.createElement('img');
imgObj.src = pic;
imgObj.dataset.idx = idx % gsName.length;
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}`;
loadStory(selIdx);
}
});
let loadStory = (idx) => {
imgHold.innerHTML = '';
imgHold.style.left = '0px';
imgHold.style.width = pics.length * storyBookBlk.offsetWidth + 'px';
pics.forEach(pic => {
let imgObj = document.createElement('img');
imgObj.src = pic;pic.alt='';
imgHold.appendChild(imgObj);
});

let numPic = imgHold.querySelectorAll('img');

oBlk.onmousedown = (ev) => {
let styleLeft = parseInt(imgHold.style.left);
let sbOffsetWidth = parseInt(storyBookBlk.offsetWidth);
let imgOffsetLeft = parseInt(imgHold.offsetLeft);
if(ev.button === 0) {
if(styleLeft > ((1 - numPic.length) * sbOffsetWidth)) imgHold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
else imgHold.style.left = '0px';
}
else if(ev.button === 2) {
if(imgOffsetLeft === 0)imgHold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
else imgHold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
}

}
oBlk.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
}
loadStory(0);
}
</script>

杨帆发表于 2025-12-6 20:15

这个好，可以跟着也曾年轻老师看小人书了{:4_174:}

也曾年轻 发表于 2025-12-6 20:53

杨帆发表于 2025-12-6 20:15
这个好，可以跟着也曾年轻老师看小人书了

谢谢支持！晚上好！

小辣椒 发表于 2025-12-6 21:12

哇塞，这个代码制作连环画感觉很高级呢，居然这么流畅，内容丰富，不是一般的人可以做出来的，必须赞一个{:4_178:}！

小辣椒 发表于 2025-12-6 21:16

这个连环画还可以涨知识，小辣椒以前这些故事不知道的{:4_170:}

小辣椒 发表于 2025-12-6 21:17

谢谢高手老师分享，小辣椒感觉我套用玩都不一定会成功

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

小辣椒发表于 2025-12-6 21:12
哇塞，这个代码制作连环画感觉很高级呢，居然这么流畅，内容丰富，不是一般的人可以做出来的，必须赞一个{: ...

代码其实不复杂，就是图片量有点大费些功夫。

也曾年轻 发表于 2025-12-6 21:23

小辣椒发表于 2025-12-6 21:16
这个连环画还可以涨知识，小辣椒以前这些故事不知道的

懒得看小说，看看小人书也是一个替代。

小辣椒 发表于 2025-12-6 21:32

也曾年轻发表于 2025-12-6 21:21
代码其实不复杂，就是图片量有点大费些功夫。

我发现界面上的虚线坎入的框设置的很漂亮

小辣椒 发表于 2025-12-6 21:37

高手老师，小辣椒太喜欢这个制作了，借用一下，哈哈，我会写明是转贴，是也曾年轻老师的原创{:4_187:}

小文发表于 2025-12-6 21:44

太喜欢了，谢谢!

阿狄丽娜 发表于 2025-12-6 21:45

竟然可以翻页

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

小辣椒发表于 2025-12-6 21:32
我发现界面上的虚线坎入的框设置的很漂亮

线形为 groove 的边框

也曾年轻 发表于 2025-12-6 21:50

小辣椒发表于 2025-12-6 21:37
高手老师，小辣椒太喜欢这个制作了，借用一下，哈哈，我会写明是转贴，是也曾年轻老师的原创

无所谓，对我也只是个练习帖。

也曾年轻 发表于 2025-12-6 21:51

小文发表于 2025-12-6 21:44
太喜欢了，谢谢!

谢谢欣赏支持！晚上好！

也曾年轻 发表于 2025-12-6 21:52

阿狄丽娜发表于 2025-12-6 21:45
竟然可以翻页

谢谢欣赏支持！晚上好！

马黑黑 发表于 2025-12-6 22:02

这个好玩。感谢分享

也曾年轻 发表于 2025-12-6 22:07

马黑黑发表于 2025-12-6 22:02
这个好玩。感谢分享

谢谢欣赏支持！晚上好！

马黑黑 发表于 2025-12-6 22:08

也曾年轻发表于 2025-12-6 22:07
谢谢欣赏支持！晚上好！

晚上嚎

红影发表于 2025-12-6 22:10

这个好，又是这么多小人书。
感谢也曾年轻带来的精神享受{:4_199:}

页: [1] 2

花潮论坛's Archiver

连环画 --- 水浒传