论坛 › 欢乐水吧 › 后宫逃逸者（送给樵歌）

马黑黑 发表于 2022-4-13 07:00

后宫逃逸者（送给樵歌）

<style>
        .mnBox {
                position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -214px; perspective: 2000px; }
        .imgBox {
                --w: 190px; --h: 360px; position: absolute; width: var(--w); height: var(--h); cursor: pointer; transform-style: preserve-3d; animation: rotate 15s linear infinite; }
        .imgBox img { width: var(--w); height: var(--h); position: absolute; }
        @keyframes rotate { 100% { transform: rotateY(360deg); } }
</style>

<div class="mnBox">
        <div class="imgBox"></div>
</div>

<script language="javascript">
let picAr = [
        "https://638183.freep.cn/638183/Pic/2022/mm01.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm02.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm03.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm04.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm05.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm06.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm07.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm08.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm09.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm10.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm11.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm12.jpg",
        "https://638183.freep.cn/638183/Pic/2022/mm13.jpg"
];
let iBox = document.querySelector(".imgBox");
let hStr = "";
let angle = 360 / picAr.length;
let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;
for(j=0; j<picAr.length; j++) {
        hStr += `<div style="transform: rotateY(${angle*j}deg) translateZ(${tz}px);"><img alt="" src="${picAr}" /></div>\n`;
}
iBox.innerHTML = hStr;
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/11/b0a933a8826b50f8cd68c0c705c5958b.mp3";
au.autoplay = true;
au.loop = true;
document.querySelector(".mnBox").appendChild(au);
iBox.onmousemove = function(){ iBox.style.animationPlayState = "paused"; }
iBox.onmouseout = function(){ iBox.style.animationPlayState = "running"; }
iBox.onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState = "paused");
}

</script>

樵歌 发表于 2022-4-13 07:05

大惊喜，大收获，俺一个人也收不下哇，{:4_173:}

樵歌 发表于 2022-4-13 07:06

队长、辫子、大猫咪等快快来帮忙。{:4_170:}

樵歌 发表于 2022-4-13 07:07

把里面几个最美的留下给小墨自个儿。{:4_173:}

樵歌 发表于 2022-4-13 07:08

谢谢小黑黑{:4_176:}

樵歌 发表于 2022-4-13 07:10

一共十三位，逃出魔窟的美美，个个身手不凡。{:4_189:}

马黑黑 发表于 2022-4-13 07:43

樵歌 发表于 2022-4-13 07:10
一共十三位，逃出魔窟的美美，个个身手不凡。

你都可以与之同框了

马黑黑 发表于 2022-4-13 12:12

樵歌 发表于 2022-4-13 07:05
大惊喜，大收获，俺一个人也收不下哇，

理解，现在金屋贵{:5_106:}

马黑黑 发表于 2022-4-13 12:12

樵歌 发表于 2022-4-13 07:10
一共十三位，逃出魔窟的美美，个个身手不凡。

都是宫内高手

马黑黑 发表于 2022-4-13 12:13

樵歌 发表于 2022-4-13 07:07
把里面几个最美的留下给小墨自个儿。

不用不用，我不夺人之美{:5_117:}

加林森 发表于 2022-4-13 12:24

樵歌 发表于 2022-4-13 07:06
队长、辫子、大猫咪等快快来帮忙。

{:4_172:}，樵歌搞不赢了哇。收礼开心。{:4_191:}

马黑黑 发表于 2022-4-13 12:24

加林森 发表于 2022-4-13 12:24
，樵歌搞不赢了哇。收礼开心。

樵歌的分享对象会有你{:5_117:}

加林森 发表于 2022-4-13 12:25

老黑这个制作是放大了的版本啊。{:4_199:}

马黑黑 发表于 2022-4-13 12:26

加林森 发表于 2022-4-13 12:25
老黑这个制作是放大了的版本啊。

对的

加林森 发表于 2022-4-13 12:27

马黑黑 发表于 2022-4-13 12:24
樵歌的分享对象会有你

我就不要了，让樵歌好好玩一玩。{:4_189:}

马黑黑 发表于 2022-4-13 12:27

加林森 发表于 2022-4-13 12:27
我就不要了，让樵歌好好玩一玩。

客气了

加林森 发表于 2022-4-13 12:28

马黑黑 发表于 2022-4-13 12:26
对的

嗯嗯，挺好玩的。

加林森 发表于 2022-4-13 12:28

马黑黑 发表于 2022-4-13 12:27
客气了

必须的。

马黑黑 发表于 2022-4-13 12:31

加林森 发表于 2022-4-13 12:28
必须的。

好好

马黑黑 发表于 2022-4-13 12:32

加林森 发表于 2022-4-13 12:28
嗯嗯，挺好玩的。

还行吧

查看完整版本: 后宫逃逸者（送给樵歌）