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

八扇屏 TO老樵

本帖最后由 东篱闲人 于 2022-4-14 20:34 编辑 <br /><br /><style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 773px; left: -100px; perspective: 1000px; }
      .imgBox { --w: 160px; --h: 500px; 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://i.niupic.com/images/2022/04/14/9Z47.gif",
      "https://i.niupic.com/images/2022/04/14/9Z48.gif","https://i.niupic.com/images/2022/04/14/9Z4g.jpg",
      "https://i.niupic.com/images/2022/04/14/9Z49.gif",
      "https://i.niupic.com/images/2022/04/14/9Z4a.gif","https://i.niupic.com/images/2022/04/14/9Z4g.jpg",
      "https://i.niupic.com/images/2022/04/14/9Z4b.gif",
      "https://i.niupic.com/images/2022/04/14/9Z4c.gif","https://i.niupic.com/images/2022/04/14/9Z4g.jpg",
         "https://i.niupic.com/images/2022/04/14/9Z4d.gif",
      "https://i.niupic.com/images/2022/04/14/9Z4e.gif", "https://i.niupic.com/images/2022/04/14/9Z4g.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://music.163.com/song/media/outer/url?id=25848598.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 100s linear infinite";
},10000);

</script>

加林森 发表于 2022-4-14 20:53

老兄，有一扇没有打开呢？{:4_203:}

加林森 发表于 2022-4-14 20:57

图片有点大，慢慢转过来就对了，真漂亮。{:4_199:} 帮着喊：@樵歌{:4_195:} 收礼开森！

绿叶清舟 发表于 2022-4-14 20:58

厉害啊，{:4_199:}一评分都逃了啊

东篱闲人 发表于 2022-4-14 21:02

加林森 发表于 2022-4-14 20:53
老兄，有一扇没有打开呢？

别着急，慢慢就打开了。。。。{:5_117:}

东篱闲人 发表于 2022-4-14 21:03

绿叶清舟 发表于 2022-4-14 20:58
厉害啊，一评分都逃了啊

那就说明怕评分。。。{:5_117:}

绿叶清舟 发表于 2022-4-14 21:05

东篱闲人 发表于 2022-4-14 21:03
那就说明怕评分。。。

评分又不吓人怕啥啊{:4_189:}

加林森 发表于 2022-4-14 21:07

东篱闲人 发表于 2022-4-14 21:02
别着急，慢慢就打开了。。。。

嗯嗯，看见了。挺好看的。

樵歌 发表于 2022-4-14 21:09

东篱先生有心了，好漂亮的山水屏呵{:4_176:}

樵歌 发表于 2022-4-14 21:11

一开始只有一面，慢慢的都 打开了哈。而且里外都是画儿。谢了哈。{:4_190:}

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

绿叶清舟 发表于 2022-4-14 20:58
厉害啊，一评分都逃了啊

评了分分，再刷一下，全有了{:4_173:}

东篱闲人 发表于 2022-4-14 21:14

绿叶清舟 发表于 2022-4-14 21:05
评分又不吓人怕啥啊

怕累着师傅。。。{:4_197:}

东篱闲人 发表于 2022-4-14 21:14

加林森 发表于 2022-4-14 21:07
嗯嗯，看见了。挺好看的。

{:4_174:}

东篱闲人 发表于 2022-4-14 21:14

樵歌 发表于 2022-4-14 21:11
一开始只有一面，慢慢的都 打开了哈。而且里外都是画儿。谢了哈。

不客气。你喜欢就好。。。。{:5_117:}

樵歌 发表于 2022-4-14 21:15

取回家展开来作屏风了。{:4_174:}

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

东篱闲人 发表于 2022-4-14 21:14


来来来，喝水：{:4_176:}

绿叶清舟 发表于 2022-4-14 21:54

樵歌 发表于 2022-4-14 21:13
评了分分，再刷一下，全有了

是啊，这次进来看到八面了，刚才没看全了，樵歌收礼开心

绿叶清舟 发表于 2022-4-14 21:54

东篱闲人 发表于 2022-4-14 21:14
怕累着师傅。。。

这么暖心啊{:4_189:}

红影 发表于 2022-4-14 22:30

还漂亮的制作，东篱大哥厉害{:4_187:}

东篱闲人 发表于 2022-4-15 08:22

绿叶清舟 发表于 2022-4-14 21:54
这么暖心啊

必须滴。。。{:5_112:}
页: [1] 2
查看完整版本: 八扇屏 TO老樵