《雪山》代码

马黑黑 · 发表于 2024-5-28 18:18

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

代码

<style>

#papa { margin: 20px 0 20px calc(50% - 721px) ; width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/2/snowmountain.jpg') no-repeat center/cover; box-shadow: 2px 2px 5px #333; overflow: hidden; z-index: 1; position: relative; }

.mama { position: absolute; left: 300px; top: 20px; width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }

.mama:nth-of-type(2) { left: 400px; }

e-son { position: absolute; left: calc(50% - 15px); top: 18px; width: 30px; height: 80px; border-radius: 100% 0; border: 1px solid gray; transform-origin: 50% 100%; transform: rotate(var(--deg)) translateY(-10px); background: hsla(var(--bg), 100%, 50%, .8); }

#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; }

@keyframes rot { to { transform: rotate(360deg); } }

</style>

</div>

(function() {

Array.from({length: 6}).forEach((e,k) => {

e = document.createElement('e-son');

e.style.cssText += `--deg: ${60 * k}deg; --bg: ${Math.round(Math.random() * 360)};`;

ma.appendChild(e);

});

var node = document.getElementById('ma');

var clone = node.cloneNode(true);

clone.id = 'ma1';

clone.onclick = () => ma.click();

clone.style.cssText += 'left: 800px; top: 160px; filter: hue-rotate(200deg);';

papa.appendChild(clone);

aud.onplaying = aud.onpause = () => {

papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.paused ? vid.pause() : vid.play();

};

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

})();

</script>

马黑黑 · 发表于 2024-5-28 18:19

帖子地址：

https://www.huachaowang.com/foru ... hread&tid=76219

马黑黑 · 发表于 2024-5-28 18:31

主要知识点：

（一）播放器

播放器用 class="mama" 的 div 元素带六个子元素 e-son（自定义标签）。e-son 的 CSS代码在第五行，绝对定位，30*80 的宽高尺寸，转换中心在底部中央，旋转 --deg 个角度、Y轴平移 -10px，背景颜色使用 hsla 颜色模型，色相 --bg 度。

（二）播放器生成

e-son 元素未在 HTML 中书写，它们有 JS 动态生成，代码在 17~22行。生成六个 e-son 标签前一一给它们的CSS变量 --deg 和 --bg 赋值，最后追加都 id="ma" 的容器标签。

（三）播放器克隆

23~28行代码，克隆播放器。使用 JS 内置 cloneNode() 函数（方法）硬生生将 id="ma" 克隆为 id="ma1" 的新容器元素，赋予 ma1 和 ma 相同的点击功能，最后追加给帖子容器元素。

南无月 · 发表于 2024-5-28 19:14

马黑黑发表于 2024-5-28 18:31
主要知识点：

（一）播放器

这三个点讲解得太详细了，从叶片到小播到克隆。。都清楚明白。
看来这个克隆，比之前图形克隆复杂得多。。

南无月 · 发表于 2024-5-28 19:15

给老师上酒

马黑黑 · 发表于 2024-5-28 19:40

南无月发表于 2024-5-28 19:14
这三个点讲解得太详细了，从叶片到小播到克隆。。都清楚明白。
看来这个克隆，比之前图形克隆复杂得多。 ...

这个是节点克隆。

节点，就是文档树中某一个特定分支。例如，《雪山》一帖中帖子结构的播放器 id="ma" class="mama" 的标签，它有JS生成，内含6个子元素，还原HTML代码后结构如下：

<div id="ma" class="mama">
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
</div>

这就是一个文档树节点，该节点 id="ma"，样式通过 class="mama" 使用CSS代码的设置，内有六个自定义标签 s-son。

我们可以使用 JS 的节点克隆功能完整复制 id="ma" 的节点，包括它的子节点 e-son ，克隆出来的新节点应有自己的 id 否则原节点也不能正常工作（原因是同一个页面不能有两个相同的 id 元素存在，所以一山不容二虎吧，这个知识点官方文档没有说明）。

技巧就酱纸的。