也曾年轻 发表于 2026-4-12 12:45

连环画 --- 含羞草

<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root        {--w:800px;--h:773.3px;}
#oBlk        {width:var(--w);height:var(--h);position:relative;overflow:hidden;margin-left:calc(50% - 481px);border-radius:12px;box-shadow:4px 4px 10px black;}
#pichold        {height:var(--h);position:absolute;left:0px;top:0px;}
#pichold img        {width:var(--w);height:var(--h);float:left;}
</style>
<div id='oBlk'>
        <div id="pichold"></div>
</div>
<script>
//        https://mp.weixin.qq.com/s/cZJ1jpfaN2AwMAqQ23ig2g
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzInX77dUzGgFmrich20icoRiaVJfPb4a0UthQ0QozU47BoqicnqenAUr7EmjCnGCfkXiaeAbBwicRG3U6rJnTqTibcyRibHUwPx3Nt7ckxY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkf97exlxiaFJVUusdnGibiaibJdCFCtCOhJ1xRjQ4ZLMUwtcc19QFmibTertaATz4k7ao4XFZ8sFN25ZCZs7drAdZI52yUP2zydj1Y/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzInmjk6ASX3BuEicdUOPzWNRkR9FuWmErTYogytUMBpowXd9Fzpo7ZjluN2de4ua0Xonyt4MzjZcZYBgXgKgticPGCE9y95J0uiazY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIlXBfMU7YqECxx7EpFPrLWEp2Nw1Phk8zxhzzlzJbsA7noOw86I4iaZvQ4ESrqUI7ULgqzr9csibV3bMC9cdYruibt2ibwZiaEHJWFU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIm3uHwBibsZ5EoavbxsaXYY0uDjF4sE8R47nItkBNTl5225m91fbVJNzCW0cG0sQ6uhBemUT3hoVD5Sl7jOELns00MraaDujDCE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzInwf2vSeicx3n6UIhNOqxMJf8KcYcYgNjp307wyzbok5SQicEz1o5z3VkqQhTjSKia6fCYd3gJxKefPu1hW8CSQhU62AwUvuCZIvI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIl4bcNbcEM00VVLqAbpJiblcfBkf4CURLXia8ibhYBFC1UsUpZWwegiakic2t1oFV9qNfIYFsNM0OIDBLqG2Re7ofsq2YddcdTsFxNg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzImoLVeKcmoic91iaaKk5evH61BDHW0X8SEGJnZvEG5ziaDTAVYEUdNFBLyD5gVpR4glwDxb85C8sicCHmzPOcgTGVJ0MLXl1NBXiaEM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkaZxz2P9M9SwKORYxLI1JWIZ5iaW768P8pmICmBlbZvEPYgQLz5WEooQMHjfMldMKcOWfDrpu2s68WPyETJ3P2u3HMArx4kwicM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzImNqjg0icib9W1GH8ZqRMMYEH2QUsafk7dY1093kVDMj3Vjd2uTfAIA2vr8YjHTduaOcC1sduynVNKNsKwQricK6dVyM06aw3qJEE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkdY2NaVkqhPbnupgBF94LeICIdciaSVnzK9zp4g3BaqgqibBNo29MUSPVImZj7tVSw6wPPmrgkEN1eBUbPw93KXDuYruwqPN0AY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkAZsiakIQyIFPHIoeDkpffZzH3v6xic8ICQj1lrOibyIDpiczpxdd5WibKTDauAlVyIe0ib33yOc5EpUe007ibDQjuoIb3qJwdINWY5E/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzImdI5iaH8ga2rcm4fzibMfygMRl0bTPD70WCq7DllxZiczkMicKiboOs0wYEPdFkfX0wt1VKTozrePqaqiaqRX0dhdIaJAV8p4ibJlNmk/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIlxkefJ5Mh7BUFVUGMTlWj3x8olic8EicSMtZxJTbZZVMIkKSPXwHfTiaUuCuhxHzUJ5rnbDXbjF9uCYLRfyZ542KVCBXRwuoCg9A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIml2SE9wa84JT8Uu98YGZHH6QVLsYxCX5qNA7W636epEsXlAL4mb8aw2qojVdwwJSjmptjoDWTd4HbucMLbNib83lxCzrhaK6PY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIm5eesTibHxosZ8BqF60tZQst9dr3NCxW84BqOAEGiccyiaY70PVS8r99dBVu6icQRLGfjgMKRsIuaTViaqZb5CGQ2y5zLiboLXYKuYE/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIla7EuR8pMbBDQXuRcuCxOAaicpzFK6km9G5SMQOB52tkoibzlUeWCRKMbISO7HZfm9DltcguhWlGib01Vicv1pE4YcMUVudlB57n8/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIkqy16so2B5CZLQyKdxgFUsN8dulAtk8Sw3nGbfISYmKyhPvYdO9vfdtXUlFibZyicRjGoQ7T9I0Hoa7ThGFibLSViaeb5R5DtcJAo/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIl16jqsPQVSD3GnWOHnxuB6TNysyXzqfWCYeY8IyDwXInmBgI8u2IDlkGAtvfTFWFkjIUyU9RVA2klianbYcySsFz4aquCiccstU/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzInHo5pAHzOsUILc1g3KEdkGYejiaiaiaF9vhB5FibDHiccA1raTJI83c7Lb2bjjIYiaOTbGOLp2lSibq3IvfaKvAicMEbdFmbcZyOm0efQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkT2VS4Dl9Cz7tzrfeyBMV5arL8WrTmImj0KOEvCGVpvv15Asknxtz0J6H8cSbn9tIlicGAzP7hphR7ic7vFjLzD0cDVerQgULxE/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIk0Dkx3bpdLSZMv5226ZpxC79dqfJzyS1CqicWgmiaMYUa2cUIakyzKDAMjibpsEKVe6dkSnqV9mnUkL5qgic5ia5wkrSDR52ic2bc3k/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIna3toibREOW4yxO2skyfM1sQku9aNdnAxBaFQGywGvLgOIpwsTrTGJTtyW9ztEfPjNFjXOv6NL5MnUnTS2MmGfZicvaRDUmZkWs/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIlhWbicRXc2wbeyK3TCTiapLR2Bc8TeJO5VA36f6EKkel1uzYq1djkcmsEHXEqxGQnpjw1F7Fup5Pl6j5iaJwBvhnxFRUp4B4eXicY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIlJBUsh8AZibibWs9gy8tNftfACnGhXvBKCZPtmphfNaWFr5Lv3ibEXhjzOIuicMOaUO74BhDZAfgUjCibKWoRWnUFjLZ4NN8LHFol0/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIkkNqeQ54wLIASLfmdxzPZAMbPllicMCAmAjWiabkWFCIqOF2ia9y5mH6b9UX79Zc448gthUjgcheicqaY8ibU2DTNLiaplBR8FgAY24/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIm6DKnsu52pemoGu3OkUqrhqWKelH8XNKicHZEq4nS3J3Y1JRQfibJfkxYfgTJZJX8L8Cc452JScicibffLxucFxmCczucJf2JqPN0/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIn2jMcPPBdWMeWzWjiczoGL3Qm2c2pdbfllBSwuR0UQ8xboN4PyibvW4nLQ0uQhDFvlH02zNPxlNaq3AmhnVlzTZ90icVChj7xfhA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIm4tfibFk8BR37fnukZ4iaqsJTY3fz0GLlKnYqf3OrD8opsXzeyHM6r0oDthLWdnQEMVJAhhhGibHpRHvOkicxZeGHGFem5W2hq7jI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIk9rRJBa1pkUkDMBgeYvJVGPBH6ajBnImX7xiccJCSPgsV0xMB2rTjV4nZK8vWFTCuZdVtXz8lxl8O87buXaJejvgibI4bMXwq2Y/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIk1tKIqicriaXEgibMhPkwVVbdCSZV9b9HTCkpic5VeoBHdic9kBzOHPNibTWiahd32mvWGAca8GGY8xc6aHR3ZUOiaQWzmK82RJW0DW0M/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIlIGAEpE1YLHNiaxhGFlnGhX2BsQibu9u0tUoxRBKBB4VTChlyZRfibAgQJOjvQWAy0ibl7wkSIdm8QZn0hY9dUoavab74dWgSS3qA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzImJx96c6xhZYN7WT0lBPdZnavOibAYJZG4jSrKJ7WtOZQhKBXEKeoaFaDB3DJBAZXPYNVqWE70icY1glgg3ZMZmyWrmZREDYHN1M/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIn9pmbj8rJiaKqax3Cp7d5UeUDfmoLrjJtqtt0rsic9Wz0LMQMb0Tlzmia5Ed31nHQPFxsNuHv4mibVcgdibO9g38n7MJeKdNw9LicpA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkCG3qCSDOO7qUJ01VFPr1DEzHxwyBOwGAKRJ9ogicR2ZZWwyLKZpmU0l728dzxjLya4YgONs6vSECiaExUMOmbcwcwXWOv4mcWY/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzImKY32j5sonvLaaFnKlbUaaevicVSjMAZXDGYE75lyBylCiaf1qEbib9WUaekiaNqmPrDePqFnT7TyoxagjMg0sVfWODia1wa5ciaOibk/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIlbpTXNJM3YV3GAAQCon0xS4eic27ibyKdKH9Et0gQxTMLAsdmm49jgpjpRlNw33mogcxlcNibUYWiaFjme65fibAorB4GP5gIrTbII/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIlHshjmB0wGpMx8WiaF09D0uEXzZxJicwpnAmEjEP873nLWVYmiclDO9xzzSVgKz89vibHrBf5jXXyekC7uhy1OvzhPtEf3J6dtBBc/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIms8NThSFW3JsicA8wjgU5oSduVjjiao56mQqMGmVJVSkBh5pKRp2XOhSicHJMXcQL9n1VeK3ibLoSZZmlYhNt5FHbMeWDGGVsmERs/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/zeotdHAlzIk7IGHOWNestWjAemPvibl2ZdKcUjNWU0ZgXc4f4C8PibUoJ442flFDLc2ib6sX7vvjuVxCLayLEFM9ODOgic1raAJFdrRcjAK3Qg4/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzInuGvUPS9MOVI45I8AhqM0DHH2ToJ49ZWG7Dvw0dU8AqthnibUrRBPrRwoP5EMNibrP7MCFZuu2LHr9TRpn6fAojU3KZI6ibBDv5g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzIkJlrafq54dKkTfiawarc6XUpeecfpdnjJJFTK4zmosJWx5xgKJxx1LtCuRyAXYFicAm3AAZR49iabib7pWP2JwibeAhc03XBE6MnXI/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/zeotdHAlzInqUhqibibCfaB4khydgERYlOGnCsRIAA33zOKVgnrT3iaumOS2m0FKFEtjicXlorf7Tn4FtCajeulsqEA2UISHtEdBAldWODub4gQ/640",
];
let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
        pichold.style.width = pics.length * wVal + 'px';
        pics.forEach(pic => {
                let imgObj = document.createElement('img');
                imgObj.src = pic;
                pichold.appendChild(imgObj);
        });
        let numPic = pichold.querySelectorAll('img');

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

        }
                window.addEventListener('keydown', function(ev) {
                        let styleLeft = parseInt(pichold.style.left);
                        let sbOffsetWidth = parseInt(oBlk.offsetWidth);
                        let imgOffsetLeft = parseInt(pichold.offsetLeft);
                        if(ev.code === 'ArrowDown' || ev.code === 'ArrowRight')        {
                                if(styleLeft > ((1 - numPic.length) * sbOffsetWidth))        pichold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
                                else pichold.style.left = '0px';
                        }
                        else if(ev.code === 'ArrowUp' || ev.code === 'ArrowLeft')        {
                                if(imgOffsetLeft === 0)pichold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
                                else pichold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
                        }
                });
       
        oBlk.addEventListener('contextmenu', function(event) {
                event.preventDefault();
        });
</script>

红影 发表于 2026-4-12 13:43

原来含羞草是渣男变的啊，到底是什么神仙介绍了这么个渣男给荷花女啊，害得荷花女的心思都白费了。

红影 发表于 2026-4-12 13:43

好看的连环画故事，感谢也曾年轻带来的好帖{:4_187:}

无名 发表于 2026-4-12 13:53

创意十足，赞一个!
到时候也借用代码捣鼓一下{:5_106:}

梦油 发表于 2026-4-12 14:21

这样的人还知道害羞啊？

梦江南 发表于 2026-4-12 14:33

哦，含羞草原来是渣男变的。我养过含羞草，它开出的花蛮好看的。

也曾年轻 发表于 2026-4-12 14:36

红影 发表于 2026-4-12 13:43
原来含羞草是渣男变的啊，到底是什么神仙介绍了这么个渣男给荷花女啊，害得荷花女的心思都白费了。

知道害羞就渣得不彻底{:5_106:}

谢谢欣赏支持！下午好！

也曾年轻 发表于 2026-4-12 14:36

无名 发表于 2026-4-12 13:53
创意十足，赞一个!
到时候也借用代码捣鼓一下

期待…………

下午好！

杨帆 发表于 2026-4-12 14:36

又一种风格的连环画，谢谢老师精彩分享{:4_191:}

也曾年轻 发表于 2026-4-12 14:37

梦油 发表于 2026-4-12 14:21
这样的人还知道害羞啊？

知道害羞就渣得不彻底{:5_106:}

谢谢欣赏支持！下午好！

也曾年轻 发表于 2026-4-12 14:37

梦江南 发表于 2026-4-12 14:33
哦，含羞草原来是渣男变的。我养过含羞草，它开出的花蛮好看的。

知道害羞就渣得不彻底{:5_106:}

谢谢欣赏支持！下午好！

梦江南 发表于 2026-4-12 14:39

也曾年轻 发表于 2026-4-12 14:37
知道害羞就渣得不彻底

谢谢欣赏支持！下午好！

已经来不及了！

无名 发表于 2026-4-12 14:49

也曾年轻 发表于 2026-4-12 14:36
期待…………

下午好！

貌似这组代码只适合电脑使用，手机好像不能自适应。

也曾年轻 发表于 2026-4-12 15:25

杨帆 发表于 2026-4-12 14:36
又一种风格的连环画，谢谢老师精彩分享

谢谢欣赏支持！ 下午好！

也曾年轻 发表于 2026-4-12 15:27

梦江南 发表于 2026-4-12 14:39
已经来不及了！

{:5_106:}{:4_189:}

也曾年轻 发表于 2026-4-12 15:29

无名 发表于 2026-4-12 14:49
貌似这组代码只适合电脑使用，手机好像不能自适应。

没做过适合手机的帖子，手机屏幕太小文字恐怕看不清吧。

红影 发表于 2026-4-12 21:20

也曾年轻 发表于 2026-4-12 14:36
知道害羞就渣得不彻底

谢谢欣赏支持！下午好！

也是哦，还有羞愧之心，也算不容易了。

梦油 发表于 2026-4-12 21:49

也曾年轻 发表于 2026-4-12 14:37
知道害羞就渣得不彻底

谢谢欣赏支持！下午好！

是的，谁还能指望这种人害羞啊！

也曾年轻 发表于 2026-4-13 07:07

红影 发表于 2026-4-12 21:20
也是哦，还有羞愧之心，也算不容易了。

{:5_109:}{:5_109:}{:5_109:}

也曾年轻 发表于 2026-4-13 07:07

梦油 发表于 2026-4-12 21:49
是的，谁还能指望这种人害羞啊！

{:5_109:}{:5_109:}{:5_109:}
页: [1] 2
查看完整版本: 连环画 --- 含羞草