起个网名好难 发表于 2023-2-13 22:16

情人节 --- 漫画

本帖最后由 起个网名好难 于 2023-2-14 09:55 编辑 <br /><br />
<style>
#parentBlk        {
        width:750px;;height:850px;
        display: grid;place-items:center;
        grid-template-rows:repeat(6, 1fr);
        grid-template-columns:repeat(6, 1fr);
        background-color:pink;
        padding:8px;
        overflow:hidden;border-radius:24px;
        box-shadow:3px 3px 6px darkgray;
}

.middleBlk        {
        width:420px; height:500px;
        grid-area: 2 / 2 / span 4 / span 4 ;
        display:grid;
        place-items:center;transition: .6s;
}

.roundBlk        {
        width:102px; height:120px;
        display:grid;
        place-items:center;
}
.roundBlk img{
        width:80%;
}
.middleBlk img        {
        width:85%;
}
</style>


<div id="parentBlk">
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/09e553f4f3d14c50.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/2efc8c8ca2210fcc.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/2546e2037267099d.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/e9f7e5194220f384.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/097cc0060598335f.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/b32c00c1c16b89ba.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/9447180af05deee1.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/43cace1185df57ba.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/242a399a4fb8bc04.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/62dd7e3a03e63826.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/c781693624c05980.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/097cbeb42a847953.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/09eaeee648ad15ab.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/41c4a73730e41bbb.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/dae214fee885f601.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/cd61106de4477d6f.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/215cac9deee9e542.jpg" /></div>
<div class="roundBlk"><img src="https://s3.bmp.ovh/imgs/2023/02/13/7efb436c5fc80474.jpg" /></div>

<div class="roundBlk"><img src="https://s1.ax1x.com/2023/02/13/pSodDLF.jpg" /></div>
<div class="roundBlk"><img src="https://s1.ax1x.com/2023/02/13/pSodBsU.jpg" /></div>
<div class="middleBlk"><img src="https://s1.ax1x.com/2023/02/13/pSod0MT.jpg" /></div>
</div>



<script>
let divObjs = parentBlk.querySelectorAll('.roundBlk, .middleBlk');
let idx = 0;
let exchgPos = () =>        {
        parentBlk.querySelector('.middleBlk').className = 'roundBlk';
        divObjs.className = "middleBlk";
        idx++; idx %= divObjs.length;
}
setInterval(exchgPos, 3000);
</script>

红影 发表于 2023-2-13 22:42

这些漫画真有趣。这次的变成自动小图替换大图啊，不能自己选了呢{:4_173:}

红影 发表于 2023-2-13 22:43

评分后21张图图就会集中在一起排列，也不会自动跳成大图了。需要重新刷新才行{:4_204:}

马黑黑 发表于 2023-2-13 23:22

情人节要到了

庶民 发表于 2023-2-14 04:38

好的，节日快乐

醉美水芙蓉 发表于 2023-2-14 07:02

起个网名好难 发表于 2023-2-14 09:12

红影 发表于 2023-2-13 22:42
这些漫画真有趣。这次的变成自动小图替换大图啊，不能自己选了呢

手动 =》 自动{:5_106:}

谢谢点评！

起个网名好难 发表于 2023-2-14 09:14

红影 发表于 2023-2-13 22:43
评分后21张图图就会集中在一起排列，也不会自动跳成大图了。需要重新刷新才行

应该是css设置没起作用的原因。

起个网名好难 发表于 2023-2-14 09:17

马黑黑 发表于 2023-2-13 23:22
情人节要到了

起个网名好难 发表于 2023-2-14 09:18

庶民 发表于 2023-2-14 04:38
好的，节日快乐

起个网名好难 发表于 2023-2-14 09:19

醉美水芙蓉 发表于 2023-2-14 07:02
欣赏老师佳作！

谢谢您的欣赏

上午好！

海笑 发表于 2023-2-14 10:21

欣赏老师佳作！

起个网名好难 发表于 2023-2-14 11:14

海笑 发表于 2023-2-14 10:21
欣赏老师佳作！



小辣椒 发表于 2023-2-14 13:44

加分后，效果不出来了，是和前面那个效果不一样？

起个网名好难 发表于 2023-2-14 15:33

小辣椒 发表于 2023-2-14 13:44
加分后，效果不出来了，是和前面那个效果不一样？

谢谢点评。

评分后显示异常可能是CSS设置没起作用，看不到评分后的异常现象不能确定问题在哪，抱歉。

马黑黑 发表于 2023-2-14 18:17

起个网名好难 发表于 2023-2-14 09:17


挺拽

红影 发表于 2023-2-15 20:12

起个网名好难 发表于 2023-2-14 09:12
手动 =》 自动

谢谢点评！

有意思，想怎样调代码就怎样调。厉害{:4_187:}

红影 发表于 2023-2-15 20:13

起个网名好难 发表于 2023-2-14 09:14
应该是css设置没起作用的原因。

嗯嗯，刷新以后就好了{:4_187:}

起个网名好难 发表于 2023-2-16 07:04

红影 发表于 2023-2-15 20:12
有意思，想怎样调代码就怎样调。厉害

其实“自动”比“手动”简单得多。

红影 发表于 2023-2-16 16:28

起个网名好难 发表于 2023-2-16 07:04
其实“自动”比“手动”简单得多。

嗯嗯，自动也挺好的，有的人看帖的时候想不起去点开那些图图。
页: [1] 2
查看完整版本: 情人节 --- 漫画