JS：节点克隆演示

马黑黑

效果：

代码：

<style>     #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>   <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>   <script> (function() {       //ar数组 存储克隆结果数据 [left, top, hue-rotate, width]     let ar = [[10,40,60,100], [200,180,240, 80]];       //遍历 ar 数组 ：克隆 id="ma" 元素     ar.forEach((e,k) => {         let clone = ma.cloneNode(true); //克隆母体 id="ma"的元素（true参数表示深度克隆）         var btn = clone.querySelector('#player'); //克隆对象 id="player"         clone.id="ma" + k; //克隆结果 id 不能同于母体 id         btn.id = 'player' + k; //克隆结果内的按钮 id 不能同于母体按钮 id         btn.style.width = e[3] + 'px'; //按钮宽度（图片高度会跟随宽度改变）         btn.onclick = () => player.click(); //克隆结果内的按钮点击事件等于母体按钮点击事件         //克隆结果的CSS样式设置（不设置会与母体重叠在一起）         clone.style.cssText += `             left: ${e[0]}px;             top: ${e[1]}px;             filter: hue-rotate(${e[2]}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(); //audio监听事件 ：调用联动函数       player.onclick = () => aud.paused ? aud.play() : aud.pause(); //按钮单击事件 ：控制音频暂停/播放   })(); </script>

愤怒的葡萄

最近怎么流行这个了？

马黑黑

愤怒的葡萄 发表于 2024-5-29 18:47
最近怎么流行这个了？

这个好玩

南无月

这个就出现大小不同的了，
今天整那四胞抬的时候就想等把旋转整清楚，
得把大小整得不一样才好看。
哈哈，这就来了。。
我真是幸运，想啥来啥。。

南无月

晕乎着只能灌水，等清醒了看。。

绿叶清舟

这个效果漂亮

马黑黑

南无月 发表于 2024-5-29 19:57
这个就出现大小不同的了，
今天整那四胞抬的时候就想等把旋转整清楚，
得把大小整得不一样才好看。

这里只是演示，可以举一反三，弄出自己想要的预期结果

马黑黑

绿叶清舟 发表于 2024-5-29 20:42
这个效果漂亮

别看代码略多，里面的逻辑其实非常简洁清晰

红影

这个和前面那个克隆还不一样，能克隆很多个，只要增加数组数量就好了。
黑黑厉害，代码运用如此灵活

红影

一进来先被这样场景和音乐吸引了，制作漂亮，音乐也那么好听

马黑黑

红影 发表于 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里的基本只管抄不管看的

马黑黑

绿叶清舟 发表于 2024-5-29 21:36
JS里的基本只管抄不管看的

也要能看动自己需要改的地方

红影

这里的ma player btn的值转来转去，还挺搅脑子的

马黑黑

红影 发表于 2024-5-29 21:38
这里的ma player btn的值转来转去，还挺搅脑子的

但是必须转。它们从克隆对象转为克隆结果，二者的id不能一样

红影

用e[ ]对应了数组里的位置，如果不想要哪个，直接数组里去掉就可以了吧，比如hue-rotate，数组里剩三个数值应该也可以，想加什么也应该是数组里的，然后下面的对应去设置css样式。

绿叶清舟

马黑黑 发表于 2024-5-29 21:36
也要能看动自己需要改的地方

经常会找不到或找错了