# 63 | 姓名: 黑笔记 | ip: *** 留言时间: 2024.5.29 12:53 |
多按钮、多视频的联动控制。
(一)多按钮联动控制
按钮需要 class 标识,第15、16、17行代码,img 标签 class=“star",我们可以通过这一共性标识拿到操作它们的依据:声明一个全局变量 stars,通过 querySelectorAll() 获得操作标识并赋值给 stars(代码22行)。然后在相关代码流中,使用 stars.forEach(star => ...); 循环迭代语句逐一操作按钮的相关事件或属性(代码第26行、第28行)。
按钮的CSS关键帧动画则通过操作CSS变量 --state 加以实现。元素对应的CSS属性即 animation 属性加有var(--state)(代码在第 05 行),表明关键帧动画的开关是它,我们可以依据音频是否播放来决定此开关的运行状态,即停止或运行二选一(代码在第24行)。
(二)多视频联动控制
多视频的播放、暂停控制,应与音频同步。要实现联动控制,和按钮一样,也得先拿到操作标识,道理和按钮的一样:声明变量 vids 并赋值给它,然后按 vids.forEach(vid => ...); 遍历每一个视频、进行相关操作,代码在第 25 行)。回复:77 |
# 62 | 姓名: 视频网站 | ip: *** 留言时间: 2024.5.26 22:43 |
https://pixabay.com/videos/search/?order=ec&pagi=2回复:国外的,用了限,还是算了吧 |
# 61 | 姓名: 黑笔记 | ip: *** 留言时间: 2024.5.24 22:09 |
border-radius 可以:
一个值:border-radius: 50%;
两个值:border-radius: 0 50%;
三个值:border-radius: 0 50% 100%;
四个值:border-radius: 0 50% 10% 100%;
还有最多八个值的回复:7788 |
# 60 | 姓名: 全局透明 | ip: *** 留言时间: 2024.5.22 21:13 |
其中一个是全局透明,声明完画笔之后设置画笔就行:
ctx.globalAlpha = .6;回复:74 |
# 59 | 姓名: 笔记 | ip: *** 留言时间: 2024.5.20 18:09 |
帖子容器元素使用如下CSS语句一约束子元素的位置:
display: grid;
place-items: center;
如果子元素不设置 left、top 或 translate(x,y) 之类的定位属性,则它们一直会保持绝对居中,不论大小、不论变大变小。回复:maao |
# 58 | 姓名: 黑 | ip: *** 留言时间: 2024.3.18 21:21 |
子元素水平居中方法一:父元素约束居中 display: grid; place-items: center; 子元素绝对定位(插件已经这样设定了,可以省略)并设置top或bottom值即可: position: absolute; bottom: 20px;
父元素相对定位(帖子模板已经这样设置)position: relative; 子元素绝对定位(插件已设定)并按如下方式设置:left: 50%; transform: translate(-50%);回复:66 |
# 57 | 姓名: 33 | ip: *** 留言时间: 2024.3.14 11:49 |
https://ps.bmcx.com/回复:模压 |
# 56 | 姓名: 悄然 | ip: *** 留言时间: 2024.2.19 20:29 |
margin: 130px 0 0 calc(50% - 200px);回复:00 |
Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com