论坛 › 欢乐水吧 › 《孙子兵法》 上海人美版 合集

也曾年轻 发表于 2026-4-18 14:24

《孙子兵法》 上海人美版 合集

<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root        {--w:800px;--h:673.3px;}
#oBlk        {width:var(--w);height:var(--h);position:relative;overflow:hidden;margin:auto;}
#selBook        {width:calc(0.25 * var(--w));font-size:20px;margin:14px;position:relative;color:brown;border:none;text-align:center;background-color: lightblue;}
#pichold        {height:var(--h);position:absolute;left:0px;top:0px;}
#pichold img        {width:var(--w);height:var(--h);float:left;}
#oFrame        {width:calc(24px + var(--w));height:calc(var(--h) + 70px);position:relative;
        overflow:hidden;margin-left:calc(50% - 481px);border-radius:14px;box-shadow:4px 4px 10px black;
        background-image: url(https://z3.ax1x.com/2021/09/16/4nMjJA.gif);
}
#selGroup        {width:calc(0.25 * var(--w));font-size:20px; margin:16px;position:relative;color:blue;border:none;text-align:center;background-color: pink;}
</style>
<div id="oFrame">
        <select id="selGroup"></select>
        <select id="selBook"></select>
        <div id='oBlk'>
                <div id="pichold"></div>
        </div>
</div>
<script>
let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
let sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/b8067255356c8658218222fa9243d467.js";
//sf1.src = "script/孙子兵法_人美版.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {
        groups.forEach(gp => {
                let gOpt = document.createElement("option");
                gOpt.text = gp.gName;
                selGroup.add(gOpt, null);
        });
        selGroup.selectedIndex = 0;
       
        selGroup.onchange = () =>        {
                //console.log(selGroup.selectedIndex)
                loadGroupItem(selGroup.selectedIndex);
        }
       
        let loadGroupItem = (gIdx) =>        {
                selBook.innerHTML = "";
                groups.items.forEach(item => {
                        let iOpt = document.createElement("option");
                        iOpt.text = `${groups.gName} ${item}`;
                        selBook.add(iOpt, null);
                });
        }
        selBook.selectedIndex = 0;
       
        loadGroupItem(0);
        selBook.onfocus        = selBook.onchange = () => loadPic();

        let loadPic = () =>        {
                pichold.innerHTML = "";
                pichold.style.width = picContent.length * wVal + 'px';
                pichold.style.left = '0px';
               
                picContent.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.onkeydown = 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';
                                }
                        };
       
        }
        loadPic();
}

       
        oBlk.addEventListener('contextmenu', function(event) {
                event.preventDefault();
        });
</script>

杨帆 发表于 2026-4-18 15:41

本帖最后由 杨帆 于 2026-4-18 15:49 编辑

终于看到这个合集的效果了，不过等待加载需有耐心呢，谢谢老师{:4_190:}

也曾年轻 发表于 2026-4-18 16:06

杨帆 发表于 2026-4-18 15:41
终于看到这个合集的效果了，不过等待加载需有耐心呢，谢谢老师

谢谢欣赏支持！ 下午好！

加载慢可能是数据有点多的原因。

杨帆 发表于 2026-4-18 16:09

也曾年轻 发表于 2026-4-18 16:06
谢谢欣赏支持！ 下午好！

加载慢可能是数据有点多的原因。

是，值得的等待{:4_190:}

梦油 发表于 2026-4-18 16:44

看故事，长知识。谢谢年轻朋友。

也曾年轻 发表于 2026-4-18 16:48

梦油 发表于 2026-4-18 16:44
看故事，长知识。谢谢年轻朋友。

谢谢欣赏支持！ 下午好！

梦江南 发表于 2026-4-18 16:51

这个合集方便翻阅了。老师辛苦了！{:4_180:}

梦江南 发表于 2026-4-18 16:53

可以随便翻阅很方便。赞哦！{:4_187:}

也曾年轻 发表于 2026-4-18 17:03

梦江南 发表于 2026-4-18 16:51
这个合集方便翻阅了。老师辛苦了！

谢谢欣赏支持！ 下午好！

也曾年轻 发表于 2026-4-18 17:04

梦江南 发表于 2026-4-18 16:53
可以随便翻阅很方便。赞哦！

一个帖子出了不好混时间{:5_106:}

梦江南 发表于 2026-4-18 17:07

也曾年轻 发表于 2026-4-18 17:04
一个帖子出了不好混时间

你有的是这类东西啊{:4_170:}

梦油 发表于 2026-4-18 17:23

也曾年轻 发表于 2026-4-18 16:48
谢谢欣赏支持！ 下午好！

年轻朋友，不客气。

也曾年轻 发表于 2026-4-18 17:43

梦江南 发表于 2026-4-18 17:07
你有的是这类东西啊

不好找啊{:5_102:}

梦江南 发表于 2026-4-18 18:51

也曾年轻 发表于 2026-4-18 17:43
不好找啊

慢慢找，

也曾年轻 发表于 2026-4-18 19:16

梦江南 发表于 2026-4-18 18:51
慢慢找，

每天有任务，压力大啊

梦江南 发表于 2026-4-18 19:35

也曾年轻 发表于 2026-4-18 19:16
每天有任务，压力大啊

不用给自己任务啊！看到了就做，没找到就休息。

也曾年轻 发表于 2026-4-18 19:42

梦江南 发表于 2026-4-18 19:35
不用给自己任务啊！看到了就做，没找到就休息。

玩笑话莫当真

梦江南 发表于 2026-4-18 19:43

也曾年轻 发表于 2026-4-18 19:42
玩笑话莫当真

你这是玩笑啊

也曾年轻 发表于 2026-4-18 19:47

梦江南 发表于 2026-4-18 19:43
你这是玩笑啊

没事干的时候就找素材做帖子，有事忙了就先干正经事

梦江南 发表于 2026-4-18 19:57

也曾年轻 发表于 2026-4-18 19:47
没事干的时候就找素材做帖子，有事忙了就先干正经事

嗯，主次分明。

查看完整版本: 《孙子兵法》 上海人美版 合集