梦江南 发表于 2024-7-24 17:26
嗯，这个教程基本能看懂。谢谢老师辛苦！
{:4_190:}
马黑黑 发表于 2024-7-24 12:07
本帖最后由 马黑黑 于 2024-7-24 12:12 编辑 第四讲：给帖子添加子元素并定位
前面我们已经学会了设置 ...
绝对定位、相对定位，以前只是在用，这个帖子里看得更明白了{:4_187:}
本帖最后由 马黑黑 于 2024-7-25 13:28 编辑 <br /><br /><style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
</style>
<div class="artbox">
<h2 class="textMid">第五讲：让帖子子元素动起来</h2>
<p>上一讲我们给帖子容器添加子元素。本讲，我们将让添加到帖子里的小图片动起来，比如旋转——将来它可是多媒体音画帖的音频播放控制器呢。CSS可以设计关键帧动画，旋转、移位、变大变小变颜色都不在话下。要设计关键帧动画，CSS得用上一个特别的选择器 <span class="textRed">@keyframes</span>，该选择器使用描述性语言描述动画的变化形态或过程。让我们通过代码来理解它：</p>
<div class="hE"><pre>
<style>
/* CSS关键帧动画选择器语法 ：@keyframes + 动画名称 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
</pre></div>
<p><span class="textRed">@keyframes</span> 是关键帧动画选择器固有关键字，空一格后跟上自定义的运动名称 rot，接着用一组花括号包裹描述运动过程或方式的语句，语句可以很多很多，我们使用相对简单的方法，<mark>from ... to ...</mark>，从……到……的意思，忘记了的童鞋请找出幼儿园大班英语课本温习一下。你可以让运动形态是从 <mark>left: 10px;</mark> 到 <mark>left: 300px;</mark> 发生变化，分别写成 <mark>from { left: 10px; }</mark> 和 <mark>to { left: 300px; }</mark>, 这样将位移元素；这里，我们用一个新的属性 <span class="textRed">transform</span>，它可以产生的运动方式有旋转（rotate）、平移（translate）、缩放（scale）、扭曲（skew），上例我们使用的是 rotate 旋转：从即 from 0deg 到即 to 360deg 实施旋转运动。</p>
<p>设计好动画，我们要在 #mypic 或 .mypic 选择器中调用该动画，调用方法通过属性 animation 来完成。还是看代码来加以理解：</p>
<div class="hE"><pre>
<style>
/* #mypic 选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 8s linear infinite;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
</pre></div>
<p>#mypic 选择器多数属性设置是上一讲的内容，仅 <span class="textRed">animation</span> 需要细细体会，它是调用CSS关键帧动画的一个属性，语法可以非常复杂，也可以用简化的方式使用它（术语称这类简化的使用方式为语法糖）。动画名称得有，rot 是我们在 @keyframes 选择器中设计的名称；一个运动周期的时间长度要有，这里是 8s，8秒的意思，8秒完成一次360度的旋转运动；linear 是匀速之意，这里用来描述运动的缓动形态，匀速、平滑运动，如果缺省则采用 ease 即两头慢中间快的缓动方式；infinite 是数学中的无穷大在CSS中的表达，大到无边无际，你可以用 5 来代替它，效果是旋转 5 次后运动会停下来。</p>
<p>现在我们将帖子容器的选择器以及整个帖子完整的HTML代码整合一下，动画效果就出来了：</p>
<div class="hE" id="hEShow"><pre>
<style>
/* 帖子父容器id选择器 */
#mama {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* #mypic 选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 8s linear infinite;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
<!-- HTML代码 ：父元素包裹一个子元素 -->
<div id="mama">
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
</pre></div>
<p><button id="btnShow" value="1">点击查看动画效果</button></p>
<div id="resShowBox"></div>
<p>下面给出多图运行同一个动画的代码，此代码包含了上一讲作业的答案。代码可以存为本地 .html 文档后运行或拿到 <a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a> 直接运行。</p>
<div class="hE"><pre>
<style>
/* 帖子父容器id选择器 */
#papa {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* 子元素小图片class选择器 */
.mypic {
position: absolute; /* 绝对定位 */
width: 160px;
height: 160px;
animation: rot 8s linear infinite;
}
.mypic:nth-of-type(1) { left: 10px; top: 10px; }
.mypic:nth-of-type(2) { right: 10px; bottom: 10px; }
.mypic:nth-of-type(3) { left: calc(50% - 80px); top: calc(50% - 80px); }
.mypic:nth-of-type(4) { left: 10px; bottom: 10px; }
.mypic:nth-of-type(5) { right: 10px; top: 10px; }
/* 关键帧动画 ：可以省略 from */
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="papa">
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
</pre></div>
<p>小结：运行动画需要使用关键帧动画选择器 <span class="textRed">@keyframes</span> 设定一个自定义名称的动画，动画里使用描述元素的一个或多个属性值的方式设计动画，然后在要运行动画的HTML特定元素对应的CSS选择器中使用 <span class="textRed">animation</span> 属性调用该动画。动画的设计可以使用一切合法的CSS属性，比如 left、top、width、height 以及转换属性 transform 等；animation 属性在调用动画时应给出动画名称（必须）、动画运行周期时长（必须）、缓动效果（可选）、运行次数（可选）等。今后的课程还会对CSS关键帧动画进行其他层面的探讨。</p>
<p>作业：修改本节的演示代码，令四叶草从左上角往左下角运动3次，每一次用4秒钟。提示：使用 top 属性设计 @keyframes 动画，动画设计中不能 top 和 bottom 混用，要统一使用相同的属性，要么都是 top 要么都是 bottom；计算左下角 top 值时，应考虑帖子容器的高度、子元素即图片的高度以及预留空间。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
btnShow.onclick = () => {
let pre = hEShow.querySelector('pre');
resShowBox.innerHTML = pre.innerText;
btnShow.disabled = true;
};
</script>
<div class="artbox">
<h2 class="textMid">第六讲：帖子加入音频并使用旋转的图片“控制”音频</h2>
<p>HTML的音频标签是 <span class="textRed">audio</span>，这是一个h5封装好的基于音频的媒体控件，我们可以使用语法糖的简化形式给帖子加入 audio 标签。下面的HTML代码在上一节的基础上添加了一个 audio 标签：</p>
<div class="hE"><pre>
<!-- HTML代码 ：父元素包裹两个子元素 -->
<div id="mama">
<audio id="aud" src="音频地址" autoplay loop></audio>
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
</pre></div>
<p>和图片标签一样，<span class="textRed">audio</span> 标签也有一个 id 属性，<mark>id="aud"</mark>，不过该id不是对标CSS样式，它只是表明身份，有了身份将来对它的操控就有依据（大概和点点关注不迷路意思相近）。该标签还有两个属性，<span class="textRed">autoplay</span> 和 <span class="textRed">loop</span>，分别表示自动播放和循环播放，这是做音画帖音频标签必设的属性，它还有诸多其他属性，感兴趣的童鞋可以搜一搜audio标签扩展一下对audio标签的认知。</p>
<p>以上是对audio标签的简单介绍。注意，这样的audio标签是没有界面的，音乐自动播放+循环播放的设置会让音乐的播放永不停息，直至页面被关闭。有童鞋可能会问，那为什么不让audio标签出现界面呢？这个容易，在audio标签里面加一个属性 controls 即可，与 autoplay、loop 并列放在一块儿就成，然后你会很惊讶：天哪，天下还有这么丑的东东存在！嗯嗯，audio界面是以外星人的审美观念设计的，我们不要见到它，我们用前面几节的四叶草来“控制”音频的播放与暂停会显得更酷。</p>
<p>这得用到编程！没错，做音画帖，你得会一点点编程，即使不能自己写编程代码，原理你得知道一些，改一改别人代码的能力你得有一些。好在照猫画虎即便看上去像一条狗，它也是四足动物，原理摆在那里，改代码做到心中有数就不可能会把自己改成外星人。言归正传：简单介绍一下做帖子用到的编程语言 JavaScript，简称 JS：JS是地地道道的编程语言，它写出的东西能够在浏览器中直接执行，从而使得网页更为丰富多彩，如可以交互、内容可以动态变化等等。JS以特定的HTML标签出现在页面代码中，像这样：</p>
<div class="hE"><pre>
<script>
//JS代码第一行
//JS代码第二行
//JS代码第N行
</script>
</pre></div>
<p><span class="textRed">script</span> 标签将JS代码包裹起来，JS所有的代码都将放在该标签之内，这和 CSS代码 放在 <span class="textRed">style</span> 标签里是一个道理。这样，一个拥有CSS、HTML、JS的音画帖，代码结构将如下所示：</p>
<div class="hE"><pre>
<!-- css代码 -->
<style>
/*这里是CSS代码*/
</style>
<!-- html代码 -->
<div id="papa"></div>
<!--js代码 -->
<script>
//这里是JavaScript代码
</script>
</pre></div>
<p>一般就按这样的顺序组织帖子的三种类型的代码：CSS+HTML+JS，注意CSS和JS都有各自独特的标签，HTML代码则是一个帖子容器包裹一系列的子元素。</p>
<p>下面我们来学习如何使用JS控制音频的播放与暂停。audio标签在JS中有独立的API（接口），我们根据audio控件接口提供的 puased 属性即暂停属性来判断当下audio控件是否处于暂停状态，如果暂停，那么，点击四叶草时（四叶草的 click 即点击事件被触发），音乐暂停，反之，如果音频暂停状态为假，音乐播放。看代码加以理解：</p>
<div class="hE"><pre>
//JS代码
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</pre></div>
<p>mypic 沿用我们上一节的img图片标签的id，它指向四叶草，左上角的那个旋转的图片。<mark>.</mark> 是JS特有的链式表达方法，这个点表示后面的 onclick 这个事件即点击事件属于 mypic ，意思就是 mypic 被点击的时候，其中，click 是点击，前面有个 on 即 onclick 表示被点击，所有的元素都拥有被点击的权益，比如帖子容器被点击，写成 mama.onclick，假设 mama 是帖子容器div的id标识。被点击后干嘛？我们用这样的结构引出要干的事情，<mark>= () =></mark>，这叫箭头函数，可以先不理解它，知道是这么用就行，它后面的语句通过它和前面表达的四叶草被点击的语句建立起关系，就是呢，四叶草被点击了，就执行箭头组合指向的后面的语句所描述的一切。后面部分我们先发出询问，<mark>aud.paused ?</mark>，音频（aud是audio标签的id标识）是否处于暂停状态。紧跟问号后面的语句，<mark>aud.play()</mark>，是直接作出应答：如果音频暂停中，则令其播放，play 是audio的播放动作，后面要加一对小括号，play()，前面的 aud 则是audio控件的id标识，合起来写成 <mark>aud.play()</mark>，其意为音频控件播放。接着有一个冒号，表示转折应答前面的询问，即音频是否暂停中，冒号表示“如果不是”，则执行 <mark>aud.pause()</mark> 指令，pause() 表示音频的暂停动作（注意暂停动作与暂停状态的区别）。整句代码连起来的意思就是：mypic(四叶草)被点击时，问当前aud(音频))是不是暂停中，如果是，给老子播放，如果不是，给老子暂停。就酱，四叶草的点击，可以控制音频的播放与暂停了。</p>
<p>但是这时候，四叶草却总在不停地转动中！道理上，音乐停止，它也应该停止，音乐播放，它才转动，这才达到是四叶草“控制”音乐的目的。这个，我们需要在CSS引入一个变量，<mark>--state</mark>，用来描述CSS关键帧动画的播放状态：</p>
<div class="hE"><pre>
//CSS #mypic选择器 animation 属性代码 : 添加一个 --state 变量
animation: rot 8s linear infinite var(--state);
--state: running;
</pre></div>
<p>--state 变量是自命名变量，它用来表示动画的运行或停止状态，共两个值：running 表示运行，paused 表示暂停。我们希望一开始四叶草是旋转的，所以在第三行代码给它赋值 running，而在第二行代码 animation 属性中使用 var() 将变量名称包含起来，var 是声明的意思，这表示，animation是否运行动画依赖于 --state 这个变量值。有了这个 --state 变量，我们可以使用 JS 的 <mark>setProperty()</mark> 方法来动态设置 --state 变量值，该方法隶属于 CSS 相关接口，所以使用时要使用链式方式指明 style 属性（style就是CSS代码的标签）以及是那个元素的 style 属性，看例子，我们将 mypic 四叶草的点击事件改装一下：</p>
<div class="hE"><pre>
//JS代码 : 四叶草点击事件
mypic.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</pre></div>
<p>上面代码，四叶草点击事件要做两件事情，所以箭头函数符号的后面，我们用一组花括号将多行代码组织起来。第三行代码是我们前面写好的控制音频播放暂停的代码，这里不重复解释。第四行是新添加的，控制四叶草的旋转与暂停：针对 mydiv 的 style 属性，使用 setProperty() 方法设置某个CSS属性，该方法需要两个参数，参数一是CSS属性名称，这里是 --state 变量、它是指向动画运行状态的一个CSS动画属性，用小角引号包裹起来，参数二是--state 属性值，这个值的确定方法也是通过询问：音乐是否暂停中，如果是，则 --state 变量值为 'paused'(暂停)，否则值为 'running'(运行)。酱紫，点击四叶草，就可以联动控制四叶草的旋转与暂停、音乐的播放与暂停，达到四叶草可以“控制”音乐播放暂停状态的预期目的。以下是整合好的完整代码，大家可以在线查看效果，但重要的是先理解代码的意思：</p>
<div class="hE" id="codeHE"><pre>
<!-- 第一部分 ：css代码 -->
<style>
#mama {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
#mypic {
position: absolute;
left: 20px;
top: 10px;
width: 120px;
height: 120px;
cursor: pointer; /* 指针图标设置 ：指针移动其上时呈现手型图标 */
animation: rot 8s linear infinite var(--state);
--state: running;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<!-- 第二部分 ：html代码 -->
<div id="mama">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=523696075" autoplay loop></audio>
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
<!-- 第三部分 ：JS代码 -->
<script>
//JS代码 : 四叶草点击事件
mypic.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script>
</pre></div>
<p><button id="btnRun1" type="button" value="run">点击运行以上代码</button></p>
<div id="mystage1"></div>
<p>本节，我们硬生生地将JavaScript（JS）拖出来，这是没有办法的办法，做音画帖无法绕开JS编程！JS是很难的，大家如有能力学会自己编写JS代码那是最好不过的，若学不会也没有关系，做到我讲到的基本能看得懂、将来能够根据需要修改一部分JS代码即可。随后的示例我们还会用到JS代码，我都会一一做解释、让大家尽量明白这些JS代码的作用。本节的JS功能代码严格来讲就两句，但每一句都信息量巨大，同时富含逻辑处理，建议多看几遍我的解释，力求弄懂弄通，了解JS编程的思路与实现手段。CSS代码中我们则加入了一个自动以变量 --state，该变量事实上指向动画的运行状态（动画的运行状态是一个属性），值为 paused 时表示暂停，值为 running 时表示运行，在CSS中赋值时不需要引号，在JS中动态改变 --state 值时需要引号，至于为什么，以后有机会再做了解。本节内容艰涩，所以不留作业，大家多多地去理解本节的内容就好。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
var codes = codeHE.querySelector('pre').innerText;
btnRun1.onclick = () => {
runCodes(codes, mystage1);
btnRun1.disabled = true;
};
</script>
继续来学习{:4_187:}
红影 发表于 2024-7-27 22:47
继续来学习
下一讲这里没有分页不好发布
等等
马黑黑 发表于 2024-7-27 22:52
下一讲这里没有分页不好发布
等等
没事，多回几个帖子就翻页了啊{:4_173:}
还剩3个楼层，简单。
“audio界面是以外星人的审美观念设计的”
看得笑，为什么外星人的就很丑{:4_173:}
黑黑讲得很详细。辛苦了{:4_187:}
嗯，这个帖子回完，就分页了。
哦，不对，还没分页呢。
为什么一定要分页，是因为里面的语句干涉么？
没事，每天来看看，感受一下，很快就分页了。
这个应该是特殊的，估计是一脉相承的缘故。再接下来的内容可以换名称呢。
红影 发表于 2024-7-28 11:04
哦，不对，还没分页呢。
为什么一定要分页，是因为里面的语句干涉么？
在线运行，有很多同名的东西会冲突。
这类进程一般会按一个页面一个页面讲课，这里为了集中一点放在一个帖子里。如此，同一页里如果出现两个讲义，两个讲义都有在线演示，可能就会冲突。
本页的两个讲义就有冲突：都运行里面的示例的话就会发现。
马黑黑 发表于 2024-7-28 11:07
在线运行，有很多同名的东西会冲突。
这类进程一般会按一个页面一个页面讲课，这里为了集中一点放在一 ...
嗯嗯，知道了。没事，下回你每发一个新讲义，我来负责翻页一次{:4_173:}
马黑黑 发表于 2024-7-28 11:08
本页的两个讲义就有冲突：都运行里面的示例的话就会发现。
是的，有同名的就存在这样的问题。
记得以前有人在帖子下面跟着做，也会造成主楼内容的变化{:4_204:}
还剩4个楼层，我来回复几个吧{:4_204:}
还剩4个楼层，我来回复几个吧{:4_204:}
呀，还发重了一个，正好，不去改了{:4_173:}
ok了，其实还是挺快的@马黑黑 {:4_173:}