按钮+LRC极简模块简单说明
本帖最后由 马黑黑 于 2024-2-17 12:18 编辑【JS资源】
https://638183.freep.cn/638183/web/js/btnlrc.js
【示例】
庆庆 ：空心 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
【说明】
（一）资源引用
方法一 ：适用于自由环境
<script charset="utf-8" src="https://638183.freep.cn/638183/web/js/btnlrc.js"></script>
方法二 ：适用于自由环境与DZ论坛
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
//这里用 var 声明歌词
//var geci = [ , , ];
</script>
（二）配置需求 ：JS资源加载后，除歌词声明，其他仅通过帖子CSS+HTML实现——
其一：声明歌词，变量固定为 geci ；
其二：歌词容器元素 id="lrc"，它通过伪元素模拟同步；
其三：播放控制器元素 id="btnplay"，它可以是一张图片、一个有背景图的div等等，甚至使用JS等机制为其制作复杂的图片（如《空心》）；
其四：歌词使用的关键帧动画和按钮所使用的关键帧动画共三个：
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
它们以及对它们的调用，都在帖子前端代码中实现，要求上述三个语句保留关键帧动画的原始名称，并，确保调用关键帧动画的 animation 属性中有 CSS变量 --state。
进一步了解 btnlrc 模块的使用，请参阅《空心》一帖的二楼代码。
【其他】
模块托管了页面中所有视频，若有视频，不论多少，视频将会与音频同步播放、暂停。同时，帖子中，animation属性调用的关键帧动画，只要加入了 var(--state) 参数，也将于按钮同步运行与暂停。
这个特别漂亮，各种元素考虑得十分细致{:4_199:} “其三：播放控制器元素 id="btnplay"，它可以是一张图片、一个有背景图的div等等，甚至使用JS等机制为其制作复杂的图片（如《空心》）”
空心里的按钮就是这样的复杂图片，也可以让人跟着学做各种可能的图案设置了{:4_187:} 歌词的JS部分打包了，CSS部分还留着，可以自己按自己的需求调整呢{:4_199:} 红影 发表于 2024-2-17 10:39
这个特别漂亮，各种元素考虑得十分细致
抽离出来的JS资源不负责界面渲染，它只管动作。UI的实现，在帖子中用CSS+JS完成 红影 发表于 2024-2-17 10:41
“其三：播放控制器元素 id="btnplay"，它可以是一张图片、一个有背景图的div等等，甚至使用JS等机制为其制 ...
这个按模板去做就行，叶瓣或花瓣的变量 all 可以不声明，就像帖子里的做法那样 黑黑这个是新出来的，解释说明很清晰，先转过去看看 空心帖 黑黑特别优秀的老师，讲课特别耐心{:4_199:}
小辣椒先收藏一下 这瓜好甜，俺 把瓜皮也吃了{:4_173:} 樵歌 发表于 2024-2-17 15:59
这瓜好甜，俺 把瓜皮也吃了
瓜，营养在瓜皮 马黑黑 发表于 2024-2-17 19:27
瓜，营养在瓜皮
好吧，以后光瓜行动了{:4_173:} 樵歌 发表于 2024-2-17 21:34
好吧，以后光瓜行动了
你可以选择支持瓜皮，这样负担小一些 马黑黑 发表于 2024-2-17 11:53
抽离出来的JS资源不负责界面渲染，它只管动作。UI的实现，在帖子中用CSS+JS完成
嗯嗯，渲染是css完成的吧。 马黑黑 发表于 2024-2-17 12:19
这个按模板去做就行，叶瓣或花瓣的变量 all 可以不声明，就像帖子里的做法那样
嗯嗯，等空了去试着学习一个{:4_187:} 红影 发表于 2024-2-18 20:43
嗯嗯，渲染是css完成的吧。
是的 红影 发表于 2024-2-18 20:44
嗯嗯，等空了去试着学习一个
{:4_190:} 马黑黑 发表于 2024-2-18 21:50
是的
css和js各自管好自己的事{:4_173:} 红影 发表于 2024-2-18 22:58
css和js各自管好自己的事
js也可以渲染前台，有时还非得它不可，看需要 马黑黑 发表于 2024-2-18 23:00
js也可以渲染前台，有时还非得它不可，看需要
嗯嗯，这样的案例黑黑也做过的{:4_187:} 红影 发表于 2024-2-19 12:18
嗯嗯，这样的案例黑黑也做过的
JS在渲染页面方面，既可以不作为，也可以有比CSS和HTML更大的作为
页:
[1]
2