JS：节点克隆演示
位置:
首页 >
代码集锦[ 发布时间: 2024.5.29 作者: 马黑 阅读: 50 ]
效果：
代码：
<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>
前一篇: 叶子和七星瓢虫
下一篇: 又一个漂亮的单标签音频播放器
