连环画 --- 红楼梦
本帖最后由 也曾年轻 于 2025-12-20 20:03 编辑 <br /><br /><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 32.6s 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:-3264px;}}
</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/76bee829bdbe53e0b2b1832beca3792c.js";
//sf1.src = "./红楼梦pic.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>
辛苦了~谢谢也曾年轻老师精彩分享{:4_190:} 杨帆 发表于 2025-12-20 20:23
辛苦了~谢谢也曾年轻老师精彩分享
谢谢欣赏支持！ 很喜欢红楼，心里默默盼着也曾年轻能发来红楼系列，果然见到了，太开心了{:4_199:} 感谢您的分享，我都收藏了起了。很珍贵的制作。辛苦了。祝冬安！！{:4_204:}{:4_190:}
红影 发表于 2025-12-20 21:02
很喜欢红楼，心里默默盼着也曾年轻能发来红楼系列，果然见到了，太开心了
谢谢欣赏支持！
这是个简版的只有16集 霜染枫丹 发表于 2025-12-20 21:08
感谢您的分享，我都收藏了起了。很珍贵的制作。辛苦了。祝冬安！！
谢谢欣赏支持！
晚上好！ 哇塞，又看见连环画了，小辣椒赶快收藏起来 小辣椒 发表于 2025-12-20 22:05
哇塞，又看见连环画了，小辣椒赶快收藏起来
谢谢欣赏支持！ 也曾年轻 发表于 2025-12-20 22:11
谢谢欣赏支持！
前辈老师我又拿走了，谢谢{:4_170:} 也曾年轻 发表于 2025-12-20 21:46
谢谢欣赏支持！
这是个简版的只有16集
是的，看到了，这个帖子里16集都齐了呢，刚刚忍不住看了几集{:4_187:} 老师的连环画系列不断推出，我都来不及看了！{:4_170:}辛苦了谢谢分享！{:4_180:} 刚刚看完乱判葫芦案，有时间再来看其他的。 哇，红楼梦也出来了，这样四大名著都齐了。{:4_187:} 辛苦了，多吃点饺子。祝冬至安康！ 小辣椒 发表于 2025-12-20 22:18
前辈老师我又拿走了，谢谢
你喜欢就好{:5_106:} 红影 发表于 2025-12-20 22:28
是的，看到了，这个帖子里16集都齐了呢，刚刚忍不住看了几集
有更多集的版本就是找不齐 亦是金 发表于 2025-12-21 10:55
老师的连环画系列不断推出，我都来不及看了！辛苦了谢谢分享！
谢谢欣赏支持！ 亦是金 发表于 2025-12-21 11:47
刚刚看完乱判葫芦案，有时间再来看其他的。
不急{:5_106:} 梦江南 发表于 2025-12-21 11:49
哇，红楼梦也出来了，这样四大名著都齐了。
还有个西游记{:5_106:}
页:
[1]
2