|
|

楼主 |
发表于 2022-4-13 08:01
|
显示全部楼层
代码:
- <style>
- .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: 214px; perspective: 1000px; }
- .imgBox { --w: 190px; --h: 360px; position: absolute; width: var(--w); height: var(--h); cursor: pointer; transform-style: preserve-3d; }
- .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[j]}" /></div>\n`;
- hStr += `<div><img alt="" src="${picAr[j]}" /></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");
- }
- setTimeout(function() {
- let children = iBox.children;
- for(j=0; j<picAr.length; j++) {
- children[j].style.transform = `rotateY(${angle*j}deg) translateZ(${tz}px)`;
- }
- iBox.style.animation = "rotate 15s linear infinite";
- },10000);
- </script>
复制代码
|
|