也曾年轻 发表于 2025-12-10 20:30

连环画 --- 说岳

本帖最后由 也曾年轻 于 2025-12-10 20:30 编辑 <br /><br /><meta charset="utf-8">
<meta name="referrer" content="never" />
<style type="text/css">
:root        {--w:540px; --h:760px;}
#oBlk        {
        width:840px;height:900px;
        background-image: url(https://z3.ax1x.com/2021/09/16/4nMjJA.gif);
        display: grid;
        place-items:center;position:relative;
        grid-template-rows: 700px 192px;
        grid-template-columns:100%;
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:24px;
        font-size:12px;padding:10px;
        margin:80px auto 40px calc(50% - 501px);
}
#cataFrame        {width:810px;height:192px;border:6px white groove;overflow:hidden;border-radius:24px;position:relative;}
/***************************************************************************************************/
#imgHold img        {width:var(--w);height:var(--h);transform-origin:0 0; transform:rotate(-90deg) translateX(calc(-1 * var(--w)));position:absolute;top:0px;}
#imgHold        {height:var(--w);position:absolute;left:0px;}
#storyBookBlk        {
        width:var(--h);
        height:var(--w);
        overflow:hidden;
        border-radius:24px;
        box-shadow:4px 4px 10px black;
        position:relative;
}       
#targetD        {width:820px;height:620px;border:6px white groove;place-items:center;overflow:hidden;border-radius:24px;}
#gName        {font:bold 2.5em 隶书;color:brown;margin:12px;}
#pichold        {height:192px;position:absolute;left:0px;top:0px;animation: mleft 40s linear infinite paused;}
#pichold img        {width:270px;height:192px;margin-right:4px;cursor:pointer;float:left;}
#pichold:hover        {animation-play-state: running;}
@keyframes        mleft        {to {left:-4050px;}}
</style>
<div id="oBlk">
        <div id="targetD">
                <div id="gName">《岳飞出世》</div>
                <div id="storyBookBlk">
                        <div id="imgHold">
                        <!--

                        -->
                        </div>
                </div>
        </div>
        <div id="cataFrame"><div id="pichold"></div></div>
</div>
<script>
const gsName = ["《岳飞出世》","《枪挑小梁王》","《岳母刺字》","《青龙山》","《岳飞挂帅》","《大战爱华山》","《藕塘关》","《牛头山》","《岳云》","《黄天荡》","《杨再兴》","《小商河》","《双枪陆文龙》","《大破金龙阵》","《风波亭》"];
const imgs = [
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFr7go8Vxzgw2ukgVRW7oWX1iaJ3NabiakaF9gyg6aeicoOyPRvnxlz8tlq9oL0PyRwC9rtA2RMZ2GbA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFr7go8Vxzgw2ukgVRW7oWXSxiaZtRvyibxHmjPCbRK52AVlRYw48MicXXByzJRHPayv5gzrJlic1SK7Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozGbOqy9vZqNt1E9KtEdQIk9YuhuQUIw0Yqolib3EFNAD0EbicHGdpCkwAfI8mGPMniadt3HnMdaoreNg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozGbOqy9vZqNt1E9KtEdQIk9DyVN6WMuwkzANaWIFNzKAibmP3ibvonvCYscHVmibVj1T19zt4aB8PWiaA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozF2ClcS0a3ILwic9YJ7creM6l3AzyA7cvD17XuEwxfahQV7oarMrqwicNYpjarsdHObsTPGwTx5K2qQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozF2ClcS0a3ILwic9YJ7creM6T4SQk5veviao77tJwdd7Q14ZR0g7fLHon3wj8IgRqBFWGc7TRo5v5NQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozGs7AcgQ1AdxiaoibPB1jwbonpDrURDAR2PLicj11IE290jT69xMHoXBISGswbjjqyD7sH5Xq5ccd3PA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFowBDDDJcb4HhDAGhnlFUNt6uTZkuTwVrX7RibJ8Ts3zia6t3B9pb65oQpMPcYpTiaSB9g6hebf5MQQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozGs7AcgQ1AdxiaoibPB1jwbonuuA2F7HJQVbIibsEpGC2wASyTcY6Z1TcKYAfibSQzrFsWCVk5opkTrMQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFs3YF0zVCHeomBR6yTO3OfFTrAQ6gymO6liayUdPLmEVEYHicOYvvn6ribTvK5uNtpVb1xnoK5v0IYw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFs3YF0zVCHeomBR6yTO3OfK28Rzy7TK7hvbD26pY5nWRiagY3gRpS3StibxXORStuwBeeOAX87dmkg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFIY7Lw9hzBylxnE8k7ibyUj97ZRuBeMiaL9RYvpv8ibn9scbibmIFOrK8RxprrZG5Rand7coUfYqLRQw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFIY7Lw9hzBylxnE8k7ibyUjWhBpw6BJJs6fzvlHRSyic9wuPSDVaoRyficouUq2xUG7c0jT0nKZttDQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozEib92oSeBkgpDYUypnnZ9mpAYibOZfiaTXLohicIUk3QWg3gnwh7h5X5wa3Dy91fXHYB1mgcKZS1eSXw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozEib92oSeBkgpDYUypnnZ9mp6DTbiccgj9XEnA749TJzjRSLw7nMgFmAuopaLuv3Khic5TpicSb61N1Qg/640",
/*-----------------------------------------------------------------------------------------------------------------------*/
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFr7go8Vxzgw2ukgVRW7oWX1iaJ3NabiakaF9gyg6aeicoOyPRvnxlz8tlq9oL0PyRwC9rtA2RMZ2GbA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozFr7go8Vxzgw2ukgVRW7oWXSxiaZtRvyibxHmjPCbRK52AVlRYw48MicXXByzJRHPayv5gzrJlic1SK7Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/6bML8pV2ozGbOqy9vZqNt1E9KtEdQIk9YuhuQUIw0Yqolib3EFNAD0EbicHGdpCkwAfI8mGPMniadt3HnMdaoreNg/640",
];

//let imgs = document.querySelectorAll('#imgHold img');
let hVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h'));

var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/4127602012aaaf0ff17081ac69969a55.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.style.width = imgs.length *pichold.querySelector('img').offsetWidth + 'px';
//        点击封面图片的动作
pichold.querySelectorAll('img').forEach( imgObj => {
        imgObj.onclick = () => {
                let selIdx = imgObj.dataset.idx;
                gName.innerHTML = gsName;
                loadStory(selIdx);
        }
});
        let loadStory = (idx) =>        {
                imgHold.innerHTML = '';
                imgHold.style.left = '0px';
                imgHold.style.width = pics.length * hVal + 'px';;
                pics.forEach((pic, idx) => {
                        let imgObj = document.createElement('img');
                        imgObj.src = pic;pic.alt='';
                        imgObj.style.left = hVal * idx + 'px';
                        imgHold.appendChild(imgObj);
                });
                       
                let numPic = imgHold.querySelectorAll('img');

                imgHold.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-10 20:39

连环画 --- 说岳能看到，非常有趣。有空可以来看小书了。{:4_187:}

梦江南 发表于 2025-12-10 20:40

谢谢老师带来精彩分享。{:4_204:}

也曾年轻 发表于 2025-12-10 20:48

梦江南 发表于 2025-12-10 20:39
连环画 --- 说岳能看到，非常有趣。有空可以来看小书了。

记得以前看小人书是要一、两分钱在书摊租着看的。现在那样的书摊早就消失不见了。

也曾年轻 发表于 2025-12-10 20:48

梦江南 发表于 2025-12-10 20:40
谢谢老师带来精彩分享。

谢谢欣赏支持！

晚上好！

寒冬残荷 发表于 2025-12-10 21:13

老师又出大作了！欣赏！点赞！

这么大的”工程“，老师制作辛苦了！

非常遗撼，因家务活太多，没有时间慢慢看完连环画。

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

寒冬残荷 发表于 2025-12-10 21:13
老师又出大作了！欣赏！点赞！

这么大的”工程“，老师制作辛苦了！


基本是复制粘贴，只是繁琐并不复杂，主要是试验网上存数据（不是存代码）

红影 发表于 2025-12-10 21:40

有十五本之多呢，先看了第一本，原来岳飞出生遭遇洪水，和目前坐着荷花缸才逃得性命，又遇到好人收留，还遇到好师傅收为义子，成长过程中机遇很不错呢。

红影 发表于 2025-12-10 21:41

这么多小人书现在来不及一本本看，等空了来看。
感谢也曾年轻带来这么多小人书，这个太棒了{:4_199:}

红影 发表于 2025-12-10 21:43

收藏了，空了可以过足瘾了。这样的帖子简直是大福利啊{:4_187:}

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

红影 发表于 2025-12-10 21:40
有十五本之多呢，先看了第一本，原来岳飞出生遭遇洪水，和目前坐着荷花缸才逃得性命，又遇到好人收留，还遇 ...

以前没看过？

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

红影 发表于 2025-12-10 21:43
收藏了，空了可以过足瘾了。这样的帖子简直是大福利啊

只敢捡集数较少的来做帖子{:5_106:}

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

也曾年轻 发表于 2025-12-10 21:53
以前没看过？

没有，还是第一次知道呢。{:4_204:}

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

也曾年轻 发表于 2025-12-10 21:55
只敢捡集数较少的来做帖子

天啊，十五本还算少啊，你收集了那么多好东西啊{:4_199:}

樵歌 发表于 2025-12-11 06:57

别小看小书，它把一问大著头高度浓缩了，问制作得非常清晰，好有时间再复习一次！

樵歌 发表于 2025-12-11 06:57

制作辛苦了{:4_176:}

也曾年轻 发表于 2025-12-11 07:47

红影 发表于 2025-12-10 22:16
没有，还是第一次知道呢。

看来小时候时间都花在努力用功学习了，没闲工夫看这样的闲书{:5_106:}

也曾年轻 发表于 2025-12-11 07:54

红影 发表于 2025-12-10 22:17
天啊，十五本还算少啊，你收集了那么多好东西啊

西游记 60集、三国演义60集、红楼梦 60集 是不是更夸张

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

樵歌 发表于 2025-12-11 06:57
别小看小书，它把一问大著头高度浓缩了，问制作得非常清晰，好有时间再复习一次！

当然看小说好，不过看小人书省劲{:5_106:}

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

樵歌 发表于 2025-12-11 06:57
制作辛苦了

谢谢欣赏支持！
页: [1] 2
查看完整版本: 连环画 --- 说岳