论坛 › 欢乐水吧 › 《神奇的九寨》 -- Shafaet Osman

加林森 发表于 2022-4-13 17:14

《神奇的九寨》 -- Shafaet Osman

<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://pic.imgdb.cn/item/62568991239250f7c5228eb6.jpg",
        "https://pic.imgdb.cn/item/62568ae9239250f7c524f426.jpg",
        "https://pic.imgdb.cn/item/62568b81239250f7c525ee71.jpg",
        "https://pic.imgdb.cn/item/62568c6d239250f7c5277982.jpg",
        "https://pic.imgdb.cn/item/62568d11239250f7c5286249.jpg",
        "https://pic.imgdb.cn/item/62568e24239250f7c529fe0b.jpg",
        "https://pic.imgdb.cn/item/62568eca239250f7c52b158b.jpg",
        "https://pic.imgdb.cn/item/62568f47239250f7c52c05c4.jpg",
        "https://pic.imgdb.cn/item/6256905d239250f7c52ded04.jpg",
        "https://pic.imgdb.cn/item/625690fd239250f7c52ede1d.jpg",
        "https://pic.imgdb.cn/item/62569224239250f7c5314f52.jpg",
        "https://pic.imgdb.cn/item/625692e2239250f7c5326c09.jpg",
        "https://pic.imgdb.cn/item/6256938d239250f7c5336bd0.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 = "https://music.163.com/song/media/outer/url?id=1409133799.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 17:14

@马黑黑

马黑黑 发表于 2022-4-13 18:06

这个发图方式还是不错的

加林森 发表于 2022-4-13 18:08

马黑黑 发表于 2022-4-13 18:06
这个发图方式还是不错的

嗯嗯，谢谢老黑！

马黑黑 发表于 2022-4-13 18:16

加林森 发表于 2022-4-13 18:08
嗯嗯，谢谢老黑！

铁桶阵的感觉{:5_106:}

加林森 发表于 2022-4-13 18:19

马黑黑 发表于 2022-4-13 18:16
铁桶阵的感觉

不然哪有这么美丽的地方嘛。

马黑黑 发表于 2022-4-13 18:21

加林森 发表于 2022-4-13 18:19
不然哪有这么美丽的地方嘛。

那是

加林森 发表于 2022-4-13 18:22

马黑黑 发表于 2022-4-13 18:21
那是

嗯嗯。

红影 发表于 2022-4-13 18:36

队长也做成了，好棒的{:4_199:}

加林森 发表于 2022-4-13 19:02

红影 发表于 2022-4-13 18:36
队长也做成了，好棒的

谢谢红影支持！{:4_204:}

东篱闲人 发表于 2022-4-13 19:06

俺来啦。。。。。{:4_187:}

东篱闲人 发表于 2022-4-13 19:07

无限风光，醉人醉心。。。{:5_116:}

加林森 发表于 2022-4-13 19:09

东篱闲人 发表于 2022-4-13 19:06
俺来啦。。。。。

欢迎欢迎。。。。

加林森 发表于 2022-4-13 19:09

东篱闲人 发表于 2022-4-13 19:07
无限风光，醉人醉心。。。

欢迎你来玩。。。{:4_190:}

东篱闲人 发表于 2022-4-13 19:24

加林森 发表于 2022-4-13 19:09
欢迎你来玩。。。

玩谁？{:5_115:}

加林森 发表于 2022-4-13 19:26

东篱闲人 发表于 2022-4-13 19:24
玩谁？

来我们九寨沟玩啊。。。。

东篱闲人 发表于 2022-4-13 19:29

加林森 发表于 2022-4-13 19:26
来我们九寨沟玩啊。。。。

太贵，俺是穷人。。。{:5_103:}

加林森 发表于 2022-4-13 19:32

东篱闲人 发表于 2022-4-13 19:29
太贵，俺是穷人。。。

不急的，我们划船去，不要钱的。。。。{:4_189:}

东篱闲人 发表于 2022-4-13 19:33

加林森 发表于 2022-4-13 19:32
不急的，我们划船去，不要钱的。。。。

俺没啥力气，划不动，太老了。。。。{:5_117:}

加林森 发表于 2022-4-13 19:35

东篱闲人 发表于 2022-4-13 19:33
俺没啥力气，划不动，太老了。。。。

我还有有点劲的。。。{:4_189:}

查看完整版本: 《神奇的九寨》 -- Shafaet Osman