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

转帖：连环画 --- 水浒传（曾年轻老师的原创）


<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>
        <!--iframe src="https://file.uhsea.com/2512/255bde16820d0ffe6a19dd27a910378bI8.html?idx=0" scrolling='no' frameborder='1' id="ifd"></iframe -->
        <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 21:42

非常喜欢这个代码编辑的连环画，转过来，以后要学习套用玩一个，在这里收藏起来，好东西大家也是可以欣赏

liumang 发表于 2025-12-7 23:24

这个制作工程浩大了，巨量图片

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2025-12-7 23:25

看了一下里面的代码，居然js里面一百个图

liumang 发表于 2025-12-7 23:25

转帖也精彩

{:5_124:}{:5_128:}{:5_128:}
页: [1]
查看完整版本: 转帖：连环画 --- 水浒传（曾年轻老师的原创）