JS：节点克隆演示
<style>.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#tiezi { margin: 20px auto; width: 740px; height: 420px; background: tan; box-shadow: 3px 3px 6px #111; overflow: hidden; z-index: 1; position: relative; }
.ma { position: absolute; left: 60%; top: 15%; }
.player { position: relative; cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 50px); object-fit: cover; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<h3>效果：</h3>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369578" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay autoplay loop muted></video>
<div id="ma" class="ma">
<img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" alt="" />
</div>
</div>
<h3>代码：</h3><br>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #tiezi { <span class="tBlue">margin:</span> 20px auto; <span class="tBlue">width:</span> 740px; <span class="tBlue">height:</span> 420px; <span class="tBlue">background:</span> tan; <span class="tBlue">box-shadow:</span> 3px 3px 6px #111; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> .ma { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 60%; <span class="tBlue">top:</span> 15%; }</cl-cd>
<cl-cd data-idx="4"> .player { <span class="tBlue">position:</span> relative; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 8s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 50px); <span class="tBlue">object-fit:</span> cover; }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(1turn); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"tiezi"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=369578"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4"</span> autoplay autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"ma"</span> class=<span class="tMagenta">"ma"</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> class=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/web/svg/3star-01.svg"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="14"> <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="16"> </cl-cd>
<cl-cd data-idx="17"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="18">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="19"> </cl-cd>
<cl-cd data-idx="20"> <span class="tGreen">//ar数组 存储克隆结果数据 </span></cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">let</span> ar = [, ];</cl-cd>
<cl-cd data-idx="22"> </cl-cd>
<cl-cd data-idx="23"> <span class="tGreen">//遍历 ar 数组 ：克隆 <span class="tRed">id</span>=<span class="tMagenta">"ma"</span> 元素</span></cl-cd>
<cl-cd data-idx="24"> ar.forEach((e,k) => {</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">let</span> clone = ma.cloneNode(true); <span class="tGreen">//克隆母体 <span class="tRed">id</span>=<span class="tMagenta">"ma"</span>的元素（true参数表示深度克隆）</span></cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">var</span> btn = clone.querySelector(<span class="tMagenta">'#player'</span>); <span class="tGreen">//克隆对象 <span class="tRed">id</span>=<span class="tMagenta">"player"</span></span></cl-cd>
<cl-cd data-idx="27"> clone.<span class="tRed">id</span>=<span class="tMagenta">"ma"</span> + k; <span class="tGreen">//克隆结果 <span class="tRed">id</span> 不能同于母体 id</span></cl-cd>
<cl-cd data-idx="28"> btn.<span class="tRed">id</span> = <span class="tMagenta">'player'</span> + k; <span class="tGreen">//克隆结果内的按钮 <span class="tRed">id</span> 不能同于母体按钮 id</span></cl-cd>
<cl-cd data-idx="29"> btn.style.width = e + <span class="tMagenta">'px'</span>; <span class="tGreen">//按钮宽度（图片高度会跟随宽度改变）</span></cl-cd>
<cl-cd data-idx="30"> btn.onclick = () => player.click(); <span class="tGreen">//克隆结果内的按钮点击事件等于母体按钮点击事件</span></cl-cd>
<cl-cd data-idx="31"> <span class="tGreen">//克隆结果的CSS样式设置（不设置会与母体重叠在一起）</span></cl-cd>
<cl-cd data-idx="32"> clone.style.cssText += `</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">left:</span> ${e}px;</cl-cd>
<cl-cd data-idx="34"> <span class="tBlue">top:</span> ${e}px;</cl-cd>
<cl-cd data-idx="35"> <span class="tBlue">filter:</span> hue-rotate(${e}deg);</cl-cd>
<cl-cd data-idx="36"> `;</cl-cd>
<cl-cd data-idx="37"> tiezi.appendChild(clone); <span class="tGreen">//将克隆结果追加到帖子容器</span></cl-cd>
<cl-cd data-idx="38"> });</cl-cd>
<cl-cd data-idx="39"> </cl-cd>
<cl-cd data-idx="40"> <span class="tGreen">//联动控制函数</span></cl-cd>
<cl-cd data-idx="41"> <span class="tBlue">let</span> mState = () => {</cl-cd>
<cl-cd data-idx="42"> <span class="tBlue">let</span> players = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.player'</span>),</cl-cd>
<cl-cd data-idx="43"> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="44"> tiezi.style.setProperty(<span class="tMagenta">'--state'</span>, [<span class="tMagenta">'running'</span>,<span class="tMagenta">'paused'</span>][+aud.paused]); <span class="tGreen">//控制关键帧动画</span></cl-cd>
<cl-cd data-idx="45"> players.forEach(player => player.title = [<span class="tMagenta">'暂停'</span>,<span class="tMagenta">'播放'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="46"> vids.forEach(vid => aud.paused ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="47"> <span class="tGreen">//...其它联动代码（如果有）</span></cl-cd>
<cl-cd data-idx="48"> };</cl-cd>
<cl-cd data-idx="49"> </cl-cd>
<cl-cd data-idx="50"> aud.onplaying = aud.onpause = () => mState(); <span class="tGreen">//audio监听事件 ：调用联动函数</span></cl-cd>
<cl-cd data-idx="51"> </cl-cd>
<cl-cd data-idx="52"> player.onclick = () => aud.paused ? aud.play() : aud.pause(); <span class="tGreen">//按钮单击事件 ：控制音频暂停/播放</span></cl-cd>
<cl-cd data-idx="53"> </cl-cd>
<cl-cd data-idx="54">})();</cl-cd>
<cl-cd data-idx="55"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<script>
(function() {
let ar = [, ];
ar.forEach((e,k) => {
let clone = ma.cloneNode(true);
var btn = clone.querySelector('#player');
clone.id="ma" + k;
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
clone.style.cssText += `
left: ${e}px;
top: ${e}px;
filter: hue-rotate(${e}deg);
`;
tiezi.appendChild(clone);
});
let mState = () => {
let players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
最近怎么流行这个了？ 愤怒的葡萄 发表于 2024-5-29 18:47
最近怎么流行这个了？
这个好玩 这个就出现大小不同的了，
今天整那四胞抬的时候就想等把旋转整清楚，
得把大小整得不一样才好看。
哈哈，这就来了。。
我真是幸运，想啥来啥。。{:4_170:} 晕乎着只能灌水，等清醒了看。。{:4_170:} 这个效果漂亮 南无月 发表于 2024-5-29 19:57
这个就出现大小不同的了，
今天整那四胞抬的时候就想等把旋转整清楚，
得把大小整得不一样才好看。
这里只是演示，可以举一反三，弄出自己想要的预期结果 绿叶清舟 发表于 2024-5-29 20:42
这个效果漂亮
别看代码略多，里面的逻辑其实非常简洁清晰 这个和前面那个克隆还不一样，能克隆很多个，只要增加数组数量就好了。
黑黑厉害，代码运用如此灵活{:4_199:} 一进来先被这样场景和音乐吸引了，制作漂亮，音乐也那么好听{:4_199:} 红影 发表于 2024-5-29 21:30
这个和前面那个克隆还不一样，能克隆很多个，只要增加数组数量就好了。
黑黑厉害，代码运用如此灵活{:4_19 ...
原理懂了都会做到的 马黑黑 发表于 2024-5-29 21:24
这里只是演示，可以举一反三，弄出自己想要的预期结果
要先吃透这个教程。。才能举一反三。。 南无月 发表于 2024-5-29 21:31
要先吃透这个教程。。才能举一反三。。
那必须吃透了 红影 发表于 2024-5-29 21:30
一进来先被这样场景和音乐吸引了，制作漂亮，音乐也那么好听
这音乐是挺老的了，女子十二乐坊的作品，主打乐器是独弦琴 马黑黑 发表于 2024-5-29 21:24
别看代码略多，里面的逻辑其实非常简洁清晰
JS里的基本只管抄不管看的{:4_189:} 绿叶清舟 发表于 2024-5-29 21:36
JS里的基本只管抄不管看的
也要能看动自己需要改的地方 这里的ma player btn的值转来转去，还挺搅脑子的{:4_173:} 红影 发表于 2024-5-29 21:38
这里的ma player btn的值转来转去，还挺搅脑子的
但是必须转。它们从克隆对象转为克隆结果，二者的id不能一样 用e[ ]对应了数组里的位置，如果不想要哪个，直接数组里去掉就可以了吧，比如hue-rotate，数组里剩三个数值应该也可以，想加什么也应该是数组里的，然后下面的对应去设置css样式。 马黑黑 发表于 2024-5-29 21:36
也要能看动自己需要改的地方
经常会找不到或找错了