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

连环画 --- 聊斋故事(下)

<meta charset="utf-8">
<meta name="referrer" content="never" />
<style type="text/css">
:root      {--w:800px; --h:600px;}
#oBlk      {
      width:940px;height:960px;
      background-image: url(https://z3.ax1x.com/2021/09/16/4nMjJA.gif);
      display: grid;
      place-items:center;position:relative;
      grid-template-rows: 770px 170px;
      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% - 551px);
}
#cataFrame      {width:880px;height:170px;border:6px white groove;overflow:hidden;border-radius:24px;position:relative;}
/***************************************************************************************************/
#imgHold img      {width:var(--w);height:var(--h); position:absolute;top:0px;}
#imgHold      {height:var(--h);position:absolute;left:0px;}
#storyBookBlk      {
      width:var(--w);
      height:var(--h);
      overflow:hidden;
      border-radius:24px;
      box-shadow:4px 4px 10px black;
      position:relative;
}      
#targetD      {width:880px;height:720px;border:6px white groove;place-items:center;overflow:hidden;border-radius:24px;}
#gName      {font:bold 2.5em 隶书;color:brown;margin:12px;}
#pichold      {height:160px;position:absolute;left:0px;top:0px;margin-top:5px;animation: mleft 55s linear infinite paused;}
#pichold img      {width:200px;height:160px;margin-right:4px;cursor:pointer;float:left;}
#pichold:hover      {animation-play-state: running;}
@keyframes      mleft      {to {left:-5508px;}}
</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>
let hVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));

var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/0068164bdff56cef43d96c6f254d1643.js";

sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {
gName.innerHTML = gsName;
imgs.forEach((pic,idx) => {
      let imgObj = document.createElement('img');
      imgObj.src = pic; imgObj.alt = '';
      imgObj.dataset.idx = idx % gsName.length;
      pichold.appendChild(imgObj);
});
let imgObj = pichold.querySelector('img');
let imgObjWidth = imgObj.clientWidth + parseInt(getComputedStyle(imgObj).marginLeft) + parseInt(getComputedStyle(imgObj).marginRight);

pichold.style.width = imgs.length *imgObjWidth + '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-15 22:07

又是这么多的聊斋小人书，真是精神大餐啊{:4_199:}

也曾年轻 发表于 2025-12-15 22:19

红影 发表于 2025-12-15 22:07
又是这么多的聊斋小人书，真是精神大餐啊

尽管只是复制粘贴 总算把这套书做完了。

红影 发表于 2025-12-15 22:41

又连着看了好几本，这些小人书真好看{:4_199:}

杨帆 发表于 2025-12-15 22:43

也曾年轻 发表于 2025-12-15 22:19
尽管只是复制粘贴 总算把这套书做完了。

效率挺高哇，也曾年轻老师辛苦了{:4_180:}

霜染枫丹 发表于 2025-12-15 22:57

这项工程是不可多得的精美制作，存档是好资料，阅读会带来愉悦，感谢分享，晚上好 ！{:4_204:}{:4_190:}

也曾年轻 发表于 2025-12-15 22:58

红影 发表于 2025-12-15 22:07
又是这么多的聊斋小人书，真是精神大餐啊

看画比看字要轻松些{:5_106:}

也曾年轻 发表于 2025-12-15 22:59

杨帆 发表于 2025-12-15 22:43
效率挺高哇，也曾年轻老师辛苦了

粗制滥造的完成了{:5_106:}

也曾年轻 发表于 2025-12-15 23:00

霜染枫丹 发表于 2025-12-15 22:57
这项工程是不可多得的精美制作，存档是好资料，阅读会带来愉悦，感谢分享，晚上好 ！

谢谢欣赏支持！

晚上好！

杨帆 发表于 2025-12-15 23:01

也曾年轻 发表于 2025-12-15 22:59
粗制滥造的完成了

不容易，这种制作是精细活呢{:4_180:}

也曾年轻 发表于 2025-12-15 23:04

杨帆 发表于 2025-12-15 23:01
不容易，这种制作是精细活呢

谢谢鼓励！

红影 发表于 2025-12-15 23:42

也曾年轻 发表于 2025-12-15 22:58
看画比看字要轻松些

是的，而且看图更有画面感，反正很好看的{:4_187:}

红影 发表于 2025-12-15 23:43

也曾年轻 发表于 2025-12-15 22:19
尽管只是复制粘贴 总算把这套书做完了。

要复制黏贴那么多，也不容易啊{:4_187:}

也曾年轻 发表于 2025-12-16 07:36

红影 发表于 2025-12-15 23:43
要复制黏贴那么多，也不容易啊

只会干这样简单重复的事
页: [1]
查看完整版本: 连环画 --- 聊斋故事(下)