马黑黑 发表于 2022-7-30 17:01

盒子里装啥、怎么装

本帖最后由 马黑黑 于 2022-7-30 17:09 编辑

《装拆一念间》发出来，队长就模仿做了一个帖子，神速。队长希望3d盒子里装的东东可以是自定义的，但觉得有点困难。嗯，这也正常，毕竟帖子的实现机制不是单一的，HTML与JS建立了相关联系。先看整帖代码：

<style>
#papa { margin: auto; width: 1024px; height: 640px; display: flex; justify-content: center; background: #000 url('https://638183.freep.cn/638183/Pic/38/101.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; top: calc(50% - 150px); width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 40%; top: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateZ(100px); background: linear-gradient(tan, red); opacity: .75; }
.panel { position: absolute; width: 300px; height: 300px; opacity: .75; }
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color: silver; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: calc(50% + 35px); bottom: 40px; }
</style>

<div id="papa">
      <h2>装拆一念间</h2>
      <div id="wrapper"><span id="ball"></span></div>
      <input id="btnPlay" type="button" value="音乐停" />
      <span id="yyMsg">背景音乐 - 空山新雨</span>
      <input id="btnBegin" type="button" value="暂停" />
      <span id="mkMsg">waiting ...</span>
</div>

<script>
let idx = 0, step = 1, flag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1948007070.mp3';
aud.loop = true;
aud.autoplay = true;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let panelAr = [
      ' translateY(150px) rotateX(90deg)', //下
      'translateZ(-150px)', //后
      'translateZ(150px)', //前
      'translateX(-150px) rotateY(90deg)', //左
      'translateX(150px) rotateY(90deg)', //右
      'translateY(-150px) rotateX(90deg)', //上
];
panelAr.forEach((item,key) => {
      let span = document.createElement('span');
      span.className = 'panel';
      span.style.transform = panelAr;
      span.style.display = 'none';
      wrapper.appendChild(span);
});

let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);
let TT = setInterval(mkBox, 2000);

btnBegin.onclick = () => {
      flag = !flag;
      flag ? (TT = setInterval(mkBox, 2000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');

function mkBox() {
      step > 0 ? (spanAr.style.display = 'block', mkMsg.innerText = '装') : (spanAr.style.display = 'none', mkMsg.innerText = '拆');
      spanAr.style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
      idx += step;
      if(idx > spanAr.length - 1 || idx < 0) {
                step = -step;
                idx += step;
      }
}
</script>

蓝色部分的代码，都和我帖子中盒子里的球有关。如果想用图片替代球球，则：

第一步：修改CSS样式

主要是根据图片的尺寸，修改 width 和 height 值，图片的尺寸必须小于 #wrapper 选择器的尺寸。同时可能需要调整一下其他偏移值，做时看效果再做调整。

第二步：修改HTML代码

这是必须的，要用 <img ... /> 标签替代 <span> 标签。

第三步：修改JS

蓝色部分的代码，

let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);

是为了把球加入到面板序列中，成为拆装成员的一员。第一句是将 spanAr 变换为数组（原本是DOM集合），第二句在数组中的第二个元素加入 #ball 元素，spanAr.splice(1,0,ball) 中，1 表示数组元素的序号，数组序号从 0 开始，所以 1 表示第二个元素；0 表示不删除，意为只添加，ball 表示添加的是 id="ball" 的HTML元素。这样，球球就成功加入了面板序列，是参与拆装的成员之一。

那么，这两句如何处理？其实简单，图片不加入拆装成员，上面两句代码变一句即可：

let spanAr = document.querySelectorAll('.panel');

千羽 发表于 2022-7-30 17:24


<style>
#papa { margin: auto; width: 1024px; height: 640px; display: flex; justify-content: center; background: #000 url('https://638183.freep.cn/638183/Pic/38/101.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; top: calc(50% - 150px); width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 40%; top: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateZ(100px); background: linear-gradient(tan, red); opacity: .75; }
.panel { position: absolute; width: 300px; height: 300px; opacity: .75; }
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color: silver; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: calc(50% + 35px); bottom: 40px; }
</style>

<div id="papa">
      <h2>装拆一念间</h2>
      <div id="wrapper"><span id="ball"></span></div>
      <input id="btnPlay" type="button" value="音乐停" />
      <span id="yyMsg">背景音乐 - 空山新雨</span>
      <input id="btnBegin" type="button" value="暂停" />
      <span id="mkMsg">waiting ...</span>
</div>

<script>
let idx = 0, step = 1, flag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1948007070.mp3';
aud.loop = true;
aud.autoplay = true;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let panelAr = [
      ' translateY(150px) rotateX(90deg)', //下
      'translateZ(-150px)', //后
      'translateZ(150px)', //前
      'translateX(-150px) rotateY(90deg)', //左
      'translateX(150px) rotateY(90deg)', //右
      'translateY(-150px) rotateX(90deg)', //上
];
panelAr.forEach((item,key) => {
      let span = document.createElement('span');
      span.className = 'panel';
      span.style.transform = panelAr;
      span.style.display = 'none';
      wrapper.appendChild(span);
});

let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);
let TT = setInterval(mkBox, 2000);

btnBegin.onclick = () => {
      flag = !flag;
      flag ? (TT = setInterval(mkBox, 2000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');

function mkBox() {
      step > 0 ? (spanAr.style.display = 'block', mkMsg.innerText = '装') : (spanAr.style.display = 'none', mkMsg.innerText = '拆');
      spanAr.style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
      idx += step;
      if(idx > spanAr.length - 1 || idx < 0) {
                step = -step;
                idx += step;
      }
}
</script>

千羽 发表于 2022-7-30 17:26

千羽 发表于 2022-7-30 17:24
#papa { margin: auto; width: 1024px; height: 640px; display: flex; justify-content: center; back ...

俺用了九牛二虎之力才显示{:4_201:}

千羽 发表于 2022-7-30 17:29

千羽 发表于 2022-7-30 17:24
#papa { margin: auto; width: 1024px; height: 640px; display: flex; justify-content: center; back ...

高科技的感觉{:4_187:}

浣溪沙 发表于 2022-7-30 17:31

咱吃瓜群众，围观{:4_196:}

小辣椒 发表于 2022-7-30 17:58

黑黑这个也是黑科技，想做木匠的一定要好好学习{:4_178:}

马黑黑 发表于 2022-7-30 17:59

小辣椒 发表于 2022-7-30 17:58
黑黑这个也是黑科技，想做木匠的一定要好好学习

{:4_205:}

小辣椒 发表于 2022-7-30 18:01

马黑黑 发表于 2022-7-30 17:59


黑黑，我活动拉下的有5天，哎~~都来不及了，得花几天时间了。这里还有许多新的东东。。。

马黑黑 发表于 2022-7-30 18:01

小辣椒 发表于 2022-7-30 18:01
黑黑，我活动拉下的有5天，哎~~都来不及了，得花几天时间了。这里还有许多新的东东。。。

也没啥，都相对简单的

小辣椒 发表于 2022-7-30 18:03

马黑黑 发表于 2022-7-30 18:01
也没啥，都相对简单的

直接百度去找这个字的音乐名称。。。。。晚上想做一个你那躲方盒子里面。。。

先去吃饭了

晚上见

马黑黑 发表于 2022-7-30 18:04

小辣椒 发表于 2022-7-30 18:03
直接百度去找这个字的音乐名称。。。。。晚上想做一个你那躲方盒子里面。。。

先去吃饭了


88

马黑黑 发表于 2022-7-30 18:06

千羽 发表于 2022-7-30 17:29
高科技的感觉

你把

#papa { margin: auto; 。。。

红色的改为 left: -214px

它就居中了

千羽 发表于 2022-7-30 19:58

本帖最后由 千羽 于 2022-7-30 20:01 编辑 <br /><br />马黑黑 发表于 2022-7-30 18:06
你把

#papa { margin: auto; 。。。



<style>
#papa { left: -214px; width: 1024px; height: 640px; display: flex; justify-content: center; background: #000 url('https://638183.freep.cn/638183/Pic/38/101.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; top: calc(50% - 150px); width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 40%; top: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateZ(100px); background: linear-gradient(tan, red); opacity: .75; }
.panel { position: absolute; width: 300px; height: 300px; opacity: .75; }
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color: silver; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: calc(50% + 35px); bottom: 40px; }
</style>

<div id="papa">
      <h2>装拆一念间</h2>
      <div id="wrapper"><span id="ball"></span></div>
      <input id="btnPlay" type="button" value="音乐停" />
      <span id="yyMsg">背景音乐 - 空山新雨</span>
      <input id="btnBegin" type="button" value="暂停" />
      <span id="mkMsg">waiting ...</span>
</div>

<script>
let idx = 0, step = 1, flag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1948007070.mp3';
aud.loop = true;
aud.autoplay = true;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let panelAr = [
      ' translateY(150px) rotateX(90deg)', //下
      'translateZ(-150px)', //后
      'translateZ(150px)', //前
      'translateX(-150px) rotateY(90deg)', //左
      'translateX(150px) rotateY(90deg)', //右
      'translateY(-150px) rotateX(90deg)', //上
];
panelAr.forEach((item,key) => {
      let span = document.createElement('span');
      span.className = 'panel';
      span.style.transform = panelAr;
      span.style.display = 'none';
      wrapper.appendChild(span);
});

let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);
let TT = setInterval(mkBox, 2000);

btnBegin.onclick = () => {
      flag = !flag;
      flag ? (TT = setInterval(mkBox, 2000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');

function mkBox() {
      step > 0 ? (spanAr.style.display = 'block', mkMsg.innerText = '装') : (spanAr.style.display = 'none', mkMsg.innerText = '拆');
      spanAr.style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
      idx += step;
      if(idx > spanAr.length - 1 || idx < 0) {
                step = -step;
                idx += step;
      }
}
</script>

千羽 发表于 2022-7-30 20:03

千羽 发表于 2022-7-30 19:58
本帖最后由 千羽 于 2022-7-30 20:01 编辑




嗯，改过来了，{:4_187:}

红影 发表于 2022-7-30 20:48

里面用个其他图图来代替也不错。这些修改是连环的，看起来只改一处是不行的呢。{:4_204:}

马黑黑 发表于 2022-7-30 22:03

红影 发表于 2022-7-30 20:48
里面用个其他图图来代替也不错。这些修改是连环的，看起来只改一处是不行的呢。

理解了修改就不难

红影 发表于 2022-7-31 17:29

马黑黑 发表于 2022-7-30 22:03
理解了修改就不难

是的，理解性的修改，才真的有效果，否则会改得乱七八糟了{:4_173:}

马黑黑 发表于 2022-7-31 17:31

红影 发表于 2022-7-31 17:29
是的，理解性的修改，才真的有效果，否则会改得乱七八糟了

还会出错

红影 发表于 2022-7-31 20:06

马黑黑 发表于 2022-7-31 17:31
还会出错

这个还是需要动手做一下，才真的能弄明白{:4_173:}

马黑黑 发表于 2022-7-31 21:08

红影 发表于 2022-7-31 20:06
这个还是需要动手做一下，才真的能弄明白

实践出真知识
页: [1] 2 3
查看完整版本: 盒子里装啥、怎么装