致你
<style>@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/yihv.webp') no-repeat center/cover; }
#fsbtn { top: 20px; }
#lrc { bottom: 20px; }
#mplayer { left: 100px; width: 240px; height: 240px; display: grid; place-items: center; }
.feather { position: absolute; width: 40px; height: 120px; background: url('https://638183.freep.cn/638183/small/f1.png') no-repeat center/cover; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1867217766"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer" class="mplayer"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
var total = 9, a = 360 / total;
for(var i = 0; i < total; i++) {
var f = document.createElement('span');
f.className = 'feather';
f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
mplayer.appendChild(f);
}
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script> <h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/yihv.webp') no-repeat center/cover; }
#fsbtn { top: 20px; }
#lrc { bottom: 20px; }
#mplayer { left: 100px; width: 240px; height: 240px; display: grid; place-items: center; }
.feather { position: absolute; width: 40px; height: 120px; background: url('https://638183.freep.cn/638183/small/f1.png') no-repeat center/cover; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1867217766"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer" class="mplayer"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
var total = 9, a = 360 / total;
for(var i = 0; i < total; i++) {
var f = document.createElement('span');
f.className = 'feather';
f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
mplayer.appendChild(f);
}
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖演示随意按钮模块的LRC版本。
按钮是随意的，可以一个，可以多个，class="mplayer" 的HTML标签都会纳入音频控制管理范畴。本帖是一个复合性质的按钮：按钮内有自己的子元素，这些子元素就是背景图为羽毛图案的 span标签，它们组成了一个按钮图案，复元素 #mplayer 将其包裹起来。如果不需要这些复合图案，可以简单地用 img 标签做按钮，酱紫的话，22-28行代码不要，7行代码不要，14行代码改为 img 标签即可。 来看看这个带歌词版的，这个JS的名称有点简写了~~btn_lrc.js{:4_173:}
原以为跟纯音版应该只多加一个LRC后缀 马黑黑 发表于 2025-1-12 21:06
本帖演示随意按钮模块的LRC版本。
按钮是随意的，可以一个，可以多个，class="mplayer" 的HTML标签都会 ...
我说呢，正在瞅哪里把这些羽毛整成一个圆形的，原来代码在这里。
看到给小播一个高亮滤镜，触碰亮度变化，渐变过程缓慢，这个效果也很奇特。。 前面有个svg的符合按钮，这次的直接图片的符合按钮。
又是个新的组装呢，这个按钮漂亮{:4_199:} 红影 发表于 2025-1-12 21:16
前面有个svg的符合按钮，这次的直接图片的符合按钮。
又是个新的组装呢，这个按钮漂亮
按钮是HTML复合按钮 花飞飞 发表于 2025-1-12 21:16
我说呢，正在瞅哪里把这些羽毛整成一个圆形的，原来代码在这里。
看到给小播一个高亮滤镜，触碰亮度变化 ...
这是过去的知识点 花飞飞 发表于 2025-1-12 21:12
来看看这个带歌词版的，这个JS的名称有点简写了~~btn_lrc.js
原以为跟纯音版应该只多加一个LRC后 ...
这个可以替代 button.js 模块 这个复核按钮也可以是多个么，只要多写几个mplayer就可以了？ 背景画面阳光，歌声悠扬动听，视频动态一如既往精彩，点睛之笔。
实事求是的说，高颜值高技术。。{:4_173:} 马黑黑 发表于 2025-1-12 21:17
这是过去的知识点
最近封装的代码，歌词就到最后了。。惯性思维。。{:4_170:}
马黑黑 发表于 2025-1-12 21:17
这个可以替代 button.js 模块
好哒，要纯音把该去的去掉即可。。{:4_173:}
这个操作比反过来容易一丢丢。 这个按钮漂亮 绿叶清舟 发表于 2025-1-12 21:31
这个按钮漂亮
有羽毛做的当然漂亮
马黑黑 发表于 2025-1-12 21:06
本帖演示随意按钮模块的LRC版本。
按钮是随意的，可以一个，可以多个，class="mplayer" 的HTML标签都会 ...
这个做之前要仔细看看 马黑黑 发表于 2025-1-12 21:16
按钮是HTML复合按钮
这个好，又一个新玩法{:4_187:} 红影 发表于 2025-1-12 22:31
这个好，又一个新玩法
这个不算新，以前经常玩的 小辣椒 发表于 2025-1-12 22:17
这个做之前要仔细看看
做完后看看也行 红影 发表于 2025-1-12 21:19
这个复核按钮也可以是多个么，只要多写几个mplayer就可以了？
这个麻烦大：可能得使用克隆方式