论坛 › 欢乐水吧 › TO红影

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

TO红影

<style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -180px; 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://s1.ax1x.com/2022/04/13/LMah0H.gif",
      "https://s1.ax1x.com/2022/04/13/LMaIAA.gif",
         "https://s1.ax1x.com/2022/04/13/LMaH9P.gif",
      "https://s1.ax1x.com/2022/04/13/LMaXng.gif",
          "https://s1.ax1x.com/2022/04/13/LMav7j.gif",
      "https://s1.ax1x.com/2022/04/13/LMdSNn.gif",
      
];
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://music.163.com/song/media/outer/url?id=160239.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 19:27

来来来，见面分一半。。。。{:4_189:}

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

好厉害，老兄打连发了啊。。。。{:4_189:}

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

红影快来。@红影   帮着喊：{:4_195:}

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

加林森 发表于 2022-4-13 19:30
好厉害，老兄打连发了啊。。。。

主要是学习。。。。{:5_117:}

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

东篱闲人 发表于 2022-4-13 19:32
主要是学习。。。。

嗯嗯，大家都学习才有劲。。。。{:4_189:}

马黑黑 发表于 2022-4-13 19:46

东篱拿捏尺寸已经游刃有余了。如果会JS，还可以定义一下tz变量，不用程序计算，就是把它的计算注释掉，给它一个人工值（值可以先是图片宽度的一半，不合适再调整）。tz变量是JS里下面这句：

let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;

可以改为：

let tz = 90; //Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;

//后面的东东就是注释，不留也行，如果把握得好

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

马黑黑 发表于 2022-4-13 19:46
东篱拿捏尺寸已经游刃有余了。如果会JS，还可以定义一下tz变量，不用程序计算，就是把它的计算注释掉，给它 ...

啥也不会，也学不来了，太老了，就只能套套你的代码了。。。{:5_103:}

千羽 发表于 2022-4-13 20:00

东篱老师这个魔方是无缝衔接，高手一枚{:4_187:}

千羽 发表于 2022-4-13 20:02

影儿快来收礼啦@红影{:4_195:}{:4_173:}

东篱闲人 发表于 2022-4-13 20:08

千羽 发表于 2022-4-13 20:00
东篱老师这个魔方是无缝衔接，高手一枚

玩呗。。。{:5_111:}

千羽 发表于 2022-4-13 20:11

东篱闲人 发表于 2022-4-13 20:08
玩呗。。。

俺还不会玩呢{:4_181:}

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

千羽 发表于 2022-4-13 20:11
俺还不会玩呢

玩都不会了？{:5_115:}

千羽 发表于 2022-4-13 20:15

东篱闲人 发表于 2022-4-13 20:13
玩都不会了？

俺没那个手艺{:4_181:}

红芍药 发表于 2022-4-13 20:15

飘过{:4_199:}{:4_199:}

红芍药 发表于 2022-4-13 20:16

影子手里啦{:4_174:}

东篱闲人 发表于 2022-4-13 20:17

千羽 发表于 2022-4-13 20:15
俺没那个手艺

你有。

东篱闲人 发表于 2022-4-13 20:18

红芍药 发表于 2022-4-13 20:15
飘过

你是芍药，不是蝴蝶。。。{:5_115:}

红芍药 发表于 2022-4-13 20:19

东篱闲人 发表于 2022-4-13 20:18
你是芍药，不是蝴蝶。。。

芍药更轻盈。。{:4_173:}

东篱闲人 发表于 2022-4-13 20:22

红芍药 发表于 2022-4-13 20:19
芍药更轻盈。。

凋谢啦？{:4_170:}

查看完整版本: TO红影