十秒钟后图片展开并旋转

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

马黑黑 发表于 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}" /></div>\n`;
hStr += `<div><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");
}

setTimeout(function() {
let children = iBox.children;
for(j=0; j<picAr.length; j++) {
children.style.transform = `rotateY(${angle*j}deg) translateZ(${tz}px)`;
}
iBox.style.animation = "rotate 15s linear infinite";
},10000);

</script>

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

本帖最后由马黑黑于 2022-4-13 08:18 编辑

JS部分代码解释：

13-27行：图片数组

28行：获得图片所在父元素的盒子操作句柄；

29-36行：把图片一口气写入父元素的子div中。每一张图片都有一个子div包裹着，将来控制图片去向就由这些子div去完成。注释掉的那行是后宫逃逸者帖子用的，那帖子无需等待10秒；

37-41行：加载音乐；

42-43行：鼠标滑进滑出图片（实际上是图片所在的子div）事件，动画可以暂停以便让樵歌好好审美；

44-46：鼠标单击图片事件（实际上是图片所在的子div），主要是控制音乐的播放与暂停，动画也会暂停，但鼠标指针离开后又会旋转；

48-54行：定时器setTimeout事件。打开帖子，帖子中只看到一张图片（实际上有十三张图片堆叠在一起），十秒后，定时器触发两件事：一个是给图片包裹其中的每一个子div追加不同的transform属性，另一个是给子Div的父元素（class="ImgBox"那个div）添加 animation 动画属性（@keyframes动画已在CSS中设计好，后宫逃逸者animation也写在CSS中）。

梦油发表于 2022-4-13 10:48

黑黑朋友早上好！做图真好，美不胜收。这简直就是一个当代的走马灯啊。

朵拉发表于 2022-4-13 11:04

这是旋转的走马灯么？精彩{:4_178:}

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

梦油发表于 2022-4-13 10:48
黑黑朋友早上好！做图真好，美不胜收。这简直就是一个当代的走马灯啊。

差不多的吧

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

朵拉发表于 2022-4-13 11:04
这是旋转的走马灯么？精彩

可以理解为旋转木马{:5_117:}

梦油发表于 2022-4-13 12:08

马黑黑发表于 2022-4-13 12:05
差不多的吧

动起来的画面添色不少

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

梦油发表于 2022-4-13 12:08
动起来的画面添色不少

是的，动态的才是精彩的吧

梦油发表于 2022-4-13 13:19

马黑黑发表于 2022-4-13 12:09
是的，动态的才是精彩的吧

黑黑朋友下午好！我很喜欢有动感的画面。

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

不满意不满意，平面的平面的，哪天弄个立体三维的朝俺们飞来撞个满怀就好了{:4_170:}

马黑黑 发表于 2022-4-13 14:09

樵歌发表于 2022-4-13 13:22
不满意不满意，平面的平面的，哪天弄个立体三维的朝俺们飞来撞个满怀就好了

真3的你得戴上vr设备

红影发表于 2022-4-13 17:07

又是一个新的功能，10秒后精彩呈现{:4_199:}

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

红影发表于 2022-4-13 17:07
又是一个新的功能，10秒后精彩呈现

还可以玩玩吧？

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

马黑黑发表于 2022-4-13 14:09
真3的你得戴上vr设备

我家备有三维立体眼镜。不怕{:4_173:}

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

樵歌发表于 2022-4-13 21:07
我家备有三维立体眼镜。不怕
真VR设备比普通的看3d电影的眼镜强大

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

来学习。

红影发表于 2022-4-13 21:39

马黑黑发表于 2022-4-13 18:07
还可以玩玩吧？

嗯嗯，很有趣{:4_187:}

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

红影发表于 2022-4-13 21:39
嗯嗯，很有趣

一般吧

页: [1]

花潮论坛's Archiver

十秒钟后图片展开并旋转