|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-12-12 13:36 编辑
该帖子没有改动31插件任何内容，完全是在它的基础上进行应用开发。先解释一下常规配置：
HCPlayer({
ypData: ypData,
lrcAr: [[3,"纯音乐 - 落羽生花",4]],
player_css: '--color1: hsl(30,100%,50%); --color2: hsla(0,0%,100%,0.15); --ww: 50%; align-items: center; bottom: 5px;',
lrc_css: '',
});
该插件提供五个可配置参数，帖子用了四个。起初只想用三个参数，因为想挪一下lrc歌词盒子的位置，写上了 lrc_css 和设置值，又觉得不好，就把值去掉，留个空字串测试一下空字串对插件有没有影响（30号以前的插件都会有影响）。另一个参数，pinpu，设置频谱条的长度和间距，pinpu: {size: 4, gap: 2,},，没有用上，采用了插件的默认设置，特此说明。
ypData 参数 使用事先声明的声波数组；
lrcAr 参数直接声明。本帖没有歌词，所以数组很短，就一个帖子标题。留意数组的格式，它是二维数组，所以必须写成: [[3,"帖子标题",4]], 头尾 “[]”是数组的父维，里边的“[]”是子数组元素——该子数组元素是一个个数组，里边的内容结构为 3,"文本",4 。
player_css 参数帖子设置了五个内容：
①② CSS变量 --color1 和 --color2，它是频谱条的头尾两个颜色，这两个颜色插件使用它们通过线性渐变设置频谱条的样式；
③ --ww，也是CSS变量，设定频谱父元素也就是整个频谱的总宽度（还可以配置 --hh 定义频谱高度）；
④ CSS属性 align-items，插件默认是 flex-end，设置频谱条固定于父元素mplayer的底部，帖子设置为 center，将频谱条固定于mplayer父元素垂直方向的中间——这是帖子频谱上下运行的关键所在。
⑤ CSS属性 bottom，设置频谱里父元素 papa 的底部多少距离。水平方向不用设置，因为papa已经设为子元素水平居中。
以上常规设置，还不能完成帖子频谱最终样式的目的，需要在常规设置之外找办法。大家已经看到，频谱条两头是尖的，这是怎么做到的？这是非常规设置：
如果分析过插件代码，可以知道插件频谱条对应的CSS盒子是 .mLine，为此，一个巧妙的做法（之一）是在帖子的CSS代码部分通过对 .mLine 的伪类进行定义来实现向 .mLine 添加新的样式。帖子这么操作：
<style>
#papa { /* 略 */ }
.mLine:nth-of-type(odd), .mLine:nth-of-type(even) {
background: linear-gradient(to top, var(--color2),var(--color1),var(--color2));
border-radius: 100%;
}
/* 定义奇数位不同的颜色 */
/*.mLine:nth-of-type(odd) { --color1: hsl(30,90%,40%); }*/
</style>
帖子给 .mLine 的伪类 nth-of-type，奇数（odd）和偶数（even）的，都设定了相同的两个CSS属性，background 和 border-radius，前者是背景色，使用线性渐变把 --color1 和 --color2 重新排列，后者设置频谱条圆角为100%（得出尖头状效果）。
如果需要频谱条间隔色差，则按上边给出的设置样式操作 odd 和 even 中的其中一个便可。
以上的非常规设置属高级设置，需要熟练掌握CSS知识才能自主操作。实际上，也可以通过JS完成上述高级设置工作。
先谈这些，有什么没谈到或没谈好的，将会根据互动情况补充。
|
评分
-
| 参与人数 3 | 威望 +120 |
金钱 +240 |
经验 +120 |
收起
理由
|
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 梦缘
| + 20 |
+ 40 |
+ 20 |
很给力! |
查看全部评分
|
发表于 2022-12-12 13:30
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-12-12 14:40
