|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 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 = [ [2,"歌句一",5], [8,"……",4], [126,"歌句N",5.6]];
</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) 参数,也将于按钮同步运行与暂停。
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|