|
|

楼主 |
发表于 2022-11-19 08:17
|
显示全部楼层
本帖最后由 马黑黑 于 2022-11-19 08:40 编辑
关于插件,请参阅: 花潮音频播放器插件小集合 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
这里,借音乐沙龙宝地,再说说插件的使用技巧。本帖是酱紫配置插件接口的参数:
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 10px; opacity: .75',
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
});
lrcAr 参数:使用前面声明的歌词数组参数变量名赋值
lrcAr: lrcAr,
player_css 参数:配置 bottom 值,外加一个常规CSS透明设置
player_css: 'bottom: 10px; opacity: .75',
一般来说,插件播放器的物理位置需要 left(或right)和 top(或bottom)配套出现,这里只配置了一个 bottom 值,是因为 #papa 设置了绝对居中,
display: grid; /* 网格布局 */
place-items: center; /* 令子元素纵横方向居中 */
播放器在水平方向上是自动居中的,我们想让其水平居中是不用设置 left 属性;设置 bottom 属性为 10 px,是希望播放器出现在底部。
lrc_css:这个歌词参数我专门配置了一下,重点讲讲——
由于属性较多且属性描述语句长,分行设置容易看得清楚一些(但分行不是必须的)。要给参数的属性描述语句分行,需要用到一对反引号(``),反引号的输入方法是,英文输入状态下,按键盘左上角Esc键正下方的那个键,即有波浪号(~)和反引号(`)的键位。看 lrc_css 的设置代码:
lrc_css: `
--bg: linear-gradient(hsla(160,50%,50%,.45),hsla(205,100%,50%,.65));
left: 50%;
transform: translate(-50%);
top: 20px;
color: hsla(205,50%,90%,.95);
`,
反引号将五行代码包裹起来,JS便可将里面的内容视为隶属于参数 lrc_css 参数的设置整体(这里若使用小角单引号或双引号会报错,除非不分行)。
第一行,--bg 预设的CSS变量,用了线性渐变 linear-gradient() 属性,括号里面用了两组 hsla 颜色表达体系,用以设置 lrc歌词 盒子的背景色;
第二行和第三行,left 属性 和 transform 方法配合,令 lrc歌词 水平居中;
第四行,top 属性设置 lrc歌词 位于帖子上部;
第五行,常规CSS语句 color 属性设置,它仅作用于 lrc歌词盒子的主元素的文本色,即lrc歌词的底色,给它配置了 0.05 的透明度效果很酷。
以上设置,看上去貌似很复杂,如果觉得如此,可以不设置 player_css 和 lrc_css 参数,插件一样可以正常工作,不过可能会发现,我封装的插件各方面可能不一定能配套你的帖子,所以慢慢琢磨,还是学会配置一下这两个参数。
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|