守护者

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

马黑黑 发表于 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

梦江南 发表于 2024-5-26 08:52

欣赏学习老师的特效音画“守护者”！{:4_199:}

梦江南 发表于 2024-5-26 08:58

五朵花都能暂停和播放。{:4_199:}

红影发表于 2024-5-26 09:11

这个有趣，5个小播分别设置正转反转，每个都能独立操控暂停呢{:4_199:}

红影发表于 2024-5-26 09:13

小播设置了相同的鼠标触碰的色相和阴影变化，可以很直观地比较不同底色花朵在色相变化60度的情况下的不同展示效果了，这个真好{:4_199:}

红影发表于 2024-5-26 09:17

美丽的周日，进论坛的人就看到天使的守护，太幸福了把{:4_173:}

马黑黑 发表于 2024-5-26 09:18

红影发表于 2024-5-26 09:17
美丽的周日，进论坛的人就看到天使的守护，太幸福了把

有空看看8楼

南无月 发表于 2024-5-26 16:16

标题很是温暖
背景里的斑驳色调和小花们的鲜艳对比强烈，
天使和花儿之间的守护将生生不息且亘古不变{:4_204:}

南无月 发表于 2024-5-26 16:17

本帖最后由南无月于 2024-5-26 16:20 编辑

{:4_173:}五个小播联动控制。。小花触碰还有光晕和变色。。

看了说明，看着简单，实际上知识点好多。。{:4_187:}

南无月 发表于 2024-5-26 16:20

这贴跟老师站里重点有所不同，加的字没了。{:4_191:}

马黑黑 发表于 2024-5-26 17:57

南无月发表于 2024-5-26 16:20
这贴跟老师站里重点有所不同，加的字没了。

不一定要加字呀

马黑黑 发表于 2024-5-26 20:02

南无月发表于 2024-5-26 16:20
这贴跟老师站里重点有所不同，加的字没了。

加字的在这里，好漂酿的：

http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1716682038

千羽发表于 2024-5-26 20:12

这是安琪儿吗？好可爱的天使{:4_181:}

马黑黑 发表于 2024-5-26 20:27

千羽发表于 2024-5-26 20:12
这是安琪儿吗？好可爱的天使

守护天使

南无月 发表于 2024-5-26 21:14

马黑黑发表于 2024-5-26 20:02
加字的在这里，好漂酿的：

http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1716682038

说的就是这个排字。。
它还带了点立体效果，色彩搭得特别好看

红影发表于 2024-5-26 21:17

马黑黑发表于 2024-5-26 09:18
有空看看8楼

看了，也学习了，把它提上去了，更容易先看到{:4_187:}

南无月 发表于 2024-5-26 21:25

马黑黑发表于 2024-5-26 17:57
不一定要加字呀

{:4_170:}
我说呢早上看还有呢。
回了几处都没有。。
得喊才有啊

小辣椒 发表于 2024-5-26 21:33

五个播放器按钮{:4_173:}

页: [1] 2 3

花潮论坛's Archiver

守护者