守护者

马黑黑 · 发表于 2024-5-26 08:45

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

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

x

马黑黑 · 发表于 2024-5-26 09:17

本帖主要知识点：

（一）CSS伪类 :nth-of-type(x) 的应用

      :nth-of-type(x) 用来设置同一类属的元素第 x 个的样式。本帖，针对 class="player" 的元素对之进行定位、给关键帧动画旋转变量 --deg 赋值，代码在第 4~8 行。

      x 将对应在 HTML 代码流中 class="player" 元素出现的顺序。

（二）CSS伪类 :hover 的应用

      :hover 伪类用来触发指针设备经过元素之上时的事件，具备双向变化特性（toggle），即，指针移入时从A状态变为B状态，移开后从B状态变回A状态。本帖，:hover 伪类触发两个CSS属性，一是 filter 滤镜，色相变换+阴影投影，二是通过CSS变量 --state 暂停动画。代码在第 9 行。

（三）JS控制多个同类元素

首先需要拿到同类元素的元素对象数组，本帖要操控的元素是 class="player" 的 img 标签，我们只通过类名操作它们：

      var players = document.querySelectorAll('.player');

document.querySelectorAll() 是JS ES6内置方法，querySelectorAll('xx') 函数的参数 xx 可以是 #id、.类名、元素名称等等，还可以是复合结构的特定名称，这里用 .player 做参数、指向 class="player" 的所有元素，拿到的是一个元素对象数组。

其次用 for、while 或 forEach 等循环语句操作元素对象数组，本帖使用 forEach 语句，代码在第 26 行和第 29 行，26行用在联动函数 mState 中，用来动态改变每一个 img 标签的 title 值，29行用于响应图片的点击事件。

以 29 行为例，解释一下它的意思：

players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());

语句框架是这样：

players.forEach();

意思是，players 对象的每一个啥啥。啥啥呢？

players.forEach(player);

意思是，每一个 player。players 是前面声明并赋值的元素数组对象，player 则是用来代表 players 数组元素的自定义名称。那么，每一个 player 要干哈呢？

players.forEach( player => player.onclick = () => );

意思是，player 单击事件。单击的预期是啥呢？

players.forEach( player => player.onclick = () => aud.paused ? aud.play() : aud.pause() );

意思是：如果 id="aud" 的 audio 标签暂停，那就让它播放，反之，让它暂停。

一行代码的信息量很大。

马黑黑 · 发表于 2024-5-26 08:46

代码

<style>

#papa { margin: 20px 0 20px calc(50% - 593px); position: relative; width: 1024px; height: 576px; background: tan url('https://638183.freep.cn/638183/t24/2/guardian.jpg'); box-shadow: 2px 2px 6px #000; user-select: none; z-index: 1; }

.player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); }

.player:nth-of-type(1) { left: 535px; top: 300px; --deg: 1turn; }

.player:nth-of-type(2) { left: 600px; top: 470px; --deg: -1turn; }

.player:nth-of-type(3) { left: 700px; top: 150px; --deg: 1turn; }

.player:nth-of-type(4) { left: 925px; top: 250px; --deg: -1turn; }

.player:nth-of-type(5) { left: 300px; top: 50px; --deg: 1turn; }

.player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #000); --state: paused; }

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

</style>