檐下客

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         display: grid;
   
5.         place-items: center;
   
6.         width: 1024px;
   
7.         height: 640px;
   
8.         background: lightblue url('https://638183.freep.cn/638183/t23/3/yjxxke.jpg') no-repeat center/cover;
   
9.         box-shadow: 3px 3px 20px #000;
   
10.         position: relative;
    
11.         z-index: 1;
    
12.         --state: running;
    
13. }
    
14. .play_pic {
    
15.         position: absolute;
    
16.         width: 200px;
    
17.         height: 200px;
    
18.         right: 100px;
    
19.         opacity: .75;
    
20.         cursor: pointer;
    
21.         animation: rot 6s infinite linear var(--state);
    
22. }
    
23. .play_pic:nth-of-type(1) {
    
24.         width: 400px;
    
25.         height: 400px;
    
26.         filter: sepia(70%);
    
27. }
    
28. 
    
29. .play_pic:nth-of-type(2) {
    
30.         width: 300px;
    
31.         height: 300px;
    
32.         filter: hue-rotate(270deg) contrast(175%);
    
33. }
    
34. @keyframes rot {
    
35.         to { transform: rotate(1turn); }
    
36. }
    
37. </style>
    
38. 
    
39. <div id="papa">
    
40.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298410511" autoplay loop></audio>
    
41.         <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
    
42.         <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
    
43.         <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
    
44. </div>
    
45. 
    
46. <script>
    
47. 
    
48. let lrcAr = [
    
49.         [2.13,"词 : 说谎的鱼",1.8],
    
50.         [3.96,"曲 : 款冬Sway/汤羽",1.8],
    
51.         [5.72,"编曲:汤羽",1.4],
    
52.         [7.14,"和声编写/修音：嫦綰",1.4],
    
53.         [8.52,"分轨/后期：Asean",1.9],
    
54.         [10.45,"美工/画师:阿瞒",1.5],
    
55.         [11.93,"歌手：霉霉菌 / 楼一辰",12.8],
    
56.         [24.71,"又是暴雨拍落青峰",4.6],
    
57.         [30.44,"惹芳草 遍野哀鸿",4.6],
    
58.         [35.98,"险路迢迢荆棘没 无需停留",5.3],
    
59.         [41.24,"长剑在握独自行走",6.0],
    
60.         [48.11,"敢问大侠何去何从",4.0],
    
61.         [52.93,"忽听闻 有人唤我",4.6],
    
62.         [58.69,"此地官家亦不顾 猖盗难收",5.2],
    
63.         [64.15,"前方不知凶吉祸多",5.2],
    
64.         [70.55,"暮色垂落",3.8],
    
65.         [76.5,"将风尘轻抖",4.0],
    
66.         [81.52,"匆匆照面却浑身湿透",5.0],
    
67.         [86.73,"明明有伞 手执在右",5.1],
    
68.         [93.52,"翠柏老松如墨 重逢轻裘依旧",4.9],
    
69.         [98.86,"玉虹贯日月 曾挥断苍穹",4.6],
    
70.         [104.35,"豪气一碗酒 仗剑笑傲江湖游",5.0],
    
71.         [110.03,"为何偏偏 甘愿当个 檐下客一宿",6.1],
    
72.         [137.75,"敢问大侠何去何从",4.5],
    
73.         [143.36,"忽听闻 有人唤我",4.5],
    
74.         [149,"此地官家亦不顾 猖盗难收",5.4],
    
75.         [154.51,"前方不知凶吉祸多",5.4],
    
76.         [160.67,"暮色垂落",3.9],
    
77.         [166.25,"将风尘轻抖",4.2],
    
78.         [171.74,"匆匆照面却浑身湿透",5.0],
    
79.         [177.1,"明明有伞 手执在右",5.0],
    
80.         [183.64,"或许狷狂太过 昔日锋芒太露",5.0],
    
81.         [189.12,"杀伐争夺事 从来无止休",4.5],
    
82.         [194.76,"红颜埋骨冢 难忘这一世情仇",5.0],
    
83.         [200.5,"那把纸伞 深深埋藏 侠骨与温柔",5.2],
    
84.         [206.09,"羡采菊东篱 渡过每一个春秋",4.7],
    
85.         [211.03,"闲敲棋子落 早出晚归带锄头",5.4],
    
86.         [216.71,"若烟雨蒙蒙 脚踩淤泥思尘封",5.4],
    
87.         [222.29,"檐下回味便也足够",5.0]
    
88. ];
    
89. 
    
90. let loadJs = (url,callback) => {
    
91.         let body = document.querySelector('body'), jsNode = document.createElement('script');
    
92.         jsNode.charset = 'utf-8';
    
93.         jsNode.setAttribute('src', url);
    
94.         body.appendChild(jsNode);
    
95.         jsNode.onload = () => callback();
    
96. };
    
97. 
    
98. loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
    
99.         HCPlayer({
    
100.                 papa: '#papa',
     
101.                 lrcAr: lrcAr,
     
102.                 lrc_css: 'bottom: 20px;',
     
103.         });
     
104. });
     
105. 
     
106. </script>

复制代码

马黑黑

歌词同步插件从我们的音频播放控制器插件中抽离出来。资源地址：

https://638183.freep.cn/638183/web/api/hc_lrc.js

该插件提供的功能主要两个，一是歌词同步，配置与之前的插件中的 lrc_css 是一样的；二是简易控制音频的播放与暂停。

第二个功能要求：

帖子中要有至少一个 class="play_pic" 的标签，可以是多个，且这些标签的位置可以随意设置。这些标签，一般是图片，也可以是其它的你所需要的东东，只要 class="play_pic" 就行，然后每一个这样的标签都会接受点击而控制音乐的暂停与播放。

有时候，不想加任何标签，只放一个background背景图片，也是可以简单加工一下，使用 hc_lrc 插件：

<div id="papa" class="play_pic" ...>
    <!--其它代码 。。。-->
</div>
<!-- js代码 -->

马黑黑

本帖不同颜色的花朵，其实只用了一幅图，如下：

                               
登录/注册后可看大图

200 * 200 的尺寸。通过 CSS 的类（.play_pic {}) 设置图片总体属性，然后再藉由 :nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。

本帖，三张图片中有两张使用了 css 的 filter 属性设置图片的差异性效果。

红影

这个好，也可以加入svg图片了

红影

马黑黑 发表于 2023-11-26 08:15
本帖不同颜色的花朵，其实只用了一幅图，如下：

:nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。
它的叠放顺序就是1、2最后是.play_pic么？看到400的自动在最下面了。

红影

马黑黑 发表于 2023-11-26 07:58
歌词同步插件从我们的音频播放控制器插件中抽离出来。资源地址：

https://638183.freep.cn/638183/web/a ...

这个好，让歌词同步变简单，然后可以任意配置播放器了

红影

《檐下客》，这首歌还挺洒脱，那个播放器的图图也有趣，好像被檐下雨给驱动而转动的

红影

这个里面有很多新奇的玩法，原来做播放器帖子可以有各种任意组合。不过这需要对代码很熟

红影

马黑黑 发表于 2023-11-26 07:48
帖子代码

这个还复习了filter: 的那么多功能，就hue-rotate色相变化的用得多点，sepia是褐色效果，contrast是对比度，这里取了1.75是变大。在三个图的比较里，感受filter效果也真不错。
这个帖子里的干货真不少啊，看到这个帖子太开心了

马黑黑

红影 发表于 2023-11-26 09:13
这个还复习了filter: 的那么多功能，就hue-rotate色相变化的用得多点，sepia是褐色效果，contrast是对比 ...

帖子元素是简单的

马黑黑

红影 发表于 2023-11-26 09:06
这个里面有很多新奇的玩法，原来做播放器帖子可以有各种任意组合。不过这需要对代码很熟

期末考试接近满分的一般都做不出来。俺经常挨补考，能做

马黑黑

红影 发表于 2023-11-26 09:04
《檐下客》，这首歌还挺洒脱，那个播放器的图图也有趣，好像被檐下雨给驱动而转动的

这是要你想旋转才像

马黑黑

红影 发表于 2023-11-26 09:02
这个好，让歌词同步变简单，然后可以任意配置播放器了

随意做做，可能封装的不够完好

马黑黑

醉美水芙蓉 发表于 2023-11-26 08:35
黑黑老师早上好！这个也太漂亮了吧！

上午好。感谢支持

马黑黑

红影 发表于 2023-11-26 08:53
这个好，也可以加入svg图片了

完全可以

马黑黑

红影 发表于 2023-11-26 09:00
:nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。
它的叠放顺序就是1、2最后是.play_ ...

伪类 :nth-of-type(x) 根据HTML代码逻辑的自上而下的次序，对同类名（比如本帖的 .play_pic）元素进行个性设定，元素可以不是连续放在一处的，只要class类名相同就好。

红影

马黑黑 发表于 2023-11-26 09:56
帖子元素是简单的

元素简单，但涉及的内容挺多，都是好东西啊

红影

马黑黑 发表于 2023-11-26 09:57
期末考试接近满分的一般都做不出来。俺经常挨补考，能做

关键还在于构思，黑黑的思绪很跳脱，带来的都是惊艳的感觉