太空美女送大猫咪

马黑黑 发表于 2022-1-30 21:10

加林森 发表于 2022-1-30 21:20

老黑又换玩法了啊。这个挺好看的。{:4_199:}

马黑黑 发表于 2022-1-30 21:23

代码酒后做的，在上一帖的基础上修改一些机制，分享如下：
<style type="text/css">

.paBox {
margin: auto;
width: 720px;
height: 620px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 4px 4px 8px 2px #000;
padding: 8px;
}

.imgBox { position: relative; flex-grow: 2; background: repeating-radial-gradient(circle, white, olive,transparent, gray); }
.imgBox img {
position: absolute;
top:0; left:0; right:0; bottom:0;
margin: auto;
width: 100%;
height: 100%;
cursor: pointer;
animation: in 5s infinite alternate;
}
.imgBox img:hover { animation-play-state: paused; }
.footBox { height: 100px; display: flex; flex-direction: row; gap: 8px; justify-content: center; }
.footBox img { width: 100px; height: 100px; border-radius: 50%; cursor: pointer; opacity: 0.8; }
.footBox img:hover { opacity:1; }
.wyyyy { position: absolute;left:-45px; top:480px; clip-path: circle(33px at 43px 43px); opacity: 0.8;z-index: 6; }
@keyframes in {
50% { transform: rotate(0deg) scale(1,1); }
100% { transform: rotate(360deg) scale(0.01,0.01); }
}
</style>

<div class="paBox">
<iframe class="wyyyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1464868771&auto=1&height=66"></iframe>
<div class="imgBox"><img id="bigpic" src="https://638183.freep.cn/638183/Pic/2022/tk.jpg" alt="" /></div>
<div class="footBox">
<img id="img1" src="https://638183.freep.cn/638183/Pic/2022/tk6.jpg" alt="" />
<img id="img2" src="https://638183.freep.cn/638183/Pic/2022/tk5.jpg" alt="" />
<img id="img3" src="https://638183.freep.cn/638183/Pic/2022/tk4.jpg" alt="" />
<img id="img4" src="https://638183.freep.cn/638183/Pic/2022/tk3.jpg" alt="" />
<img id="img5" src="https://638183.freep.cn/638183/Pic/2022/tk2.jpg" alt="" />
<img id="img6" src="https://638183.freep.cn/638183/Pic/2022/tk1.jpg" alt="" />
</div>
</div>

<script>
var bigpic = document.getElementById('bigpic');
function showpic(id) { bigpic.src = document.getElementById(id).src; }
function auplay(){
var num = Math.floor(Math.random()*5)+1;
showpic('img'+num);
}
setInterval(auplay, 10000)
</script>

红影发表于 2022-1-30 21:45

图片转完还能转到别的图图上去，黑黑厉害{:4_187:}

绿叶清舟 发表于 2022-1-30 21:56

马黑黑发表于 2022-1-30 21:23
代码酒后做的，在上一帖的基础上修改一些机制，分享如下：

这就是传说中的醉码吗{:4_189:}

马黑黑 发表于 2022-1-30 22:06

绿叶清舟发表于 2022-1-30 21:56
这就是传说中的醉码吗

差不多差不多{:4_170:}

马黑黑 发表于 2022-1-30 22:08

红影发表于 2022-1-30 21:45
图片转完还能转到别的图图上去，黑黑厉害

是 JS 厉害。它可以做很多事情，这里我让它每隔十秒换一下图片

杨柳青 发表于 2022-1-30 23:07

这位特殊宇航员厉害~~{:5_106:}

樵歌发表于 2022-1-31 08:05

哇！果然又露一手绝世武功！半个呼吸之间就把猫弄上太空，了得！{:4_173:}

马黑黑 发表于 2022-1-31 08:28

樵歌发表于 2022-1-31 08:05
哇！果然又露一手绝世武功！半个呼吸之间就把猫弄上太空，了得！

大猫咪准备年货去了

马黑黑 发表于 2022-1-31 08:29

杨柳青发表于 2022-1-30 23:07
这位特殊宇航员厉害~~

{:4_181:}(⊙v⊙)嗯

加林森 发表于 2022-1-31 09:24

大猫咪飞上天啦。{:4_199:}

红影发表于 2022-1-31 10:55

马黑黑发表于 2022-1-30 22:08
是 JS 厉害。它可以做很多事情，这里我让它每隔十秒换一下图片

太不可思议了，JS真是太强大了{:4_187:}

马黑黑 发表于 2022-1-31 10:58

红影发表于 2022-1-31 10:55
太不可思议了，JS真是太强大了

而且JS代码并不多，就那么几句

红影发表于 2022-1-31 10:59

function auplay(){
var num = Math.floor(Math.random()*5)+1;
showpic('img'+num);}

是这句么，没看懂那个*5是什么意思，怎么会是10秒呢？下面那句'img'+num也很神奇，这样就可以了？

马黑黑 发表于 2022-1-31 11:01

红影发表于 2022-1-31 10:59
function auplay(){
var num = Math.floor(Math.random()*5)+1;
showpic('img'+num);}

那是取随机数

马黑黑 发表于 2022-1-31 11:02

加林森发表于 2022-1-31 09:24
大猫咪飞上天啦。

队长还不去追

加林森 发表于 2022-1-31 12:13

马黑黑发表于 2022-1-31 11:02
队长还不去追

我等大猫咪一千年{:4_170:}

红影发表于 2022-1-31 12:21

马黑黑发表于 2022-1-31 10:58
而且JS代码并不多，就那么几句

简单却不凡，JS太厉害了。

红影发表于 2022-1-31 12:21

马黑黑发表于 2022-1-31 11:01
那是取随机数

哦哦，这个不太懂，很奇妙{:4_187:}

页: [1] 2 3 4 5

花潮论坛's Archiver

太空美女送大猫咪