Pyro

马黑黑 · 发表于 2025-1-6 17:46

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-1-6 18:00

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/button.css';
	#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/pyro.webp') no-repeat center/cover; }
	#fsbtn { bottom: 20px; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1868888580"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/19/video6364e277489e5.mp4" autoplay loop muted></video>
	<img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="top: 100px;" />
	<img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="left: 100px;" />
	<img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="right: 100px;" />
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	hcplay(tz);
	fscreen.fs(tz, fsbtn);
</script>

马黑黑 · 发表于 2025-1-6 18:00

本帖最后由马黑黑于 2025-1-6 20:36 编辑

button模块说明

（一）音频控制按钮

凡帖子里 class="mplayer" 的HTML标签都是可以控制音频的对象，它或它们运行CSS关键帧动画 rot；若果木有 mplayer 标签，则将帖子主元素视为控制音频播放暂停的对象，酱紫的话，帖子中若有其它点击操作的子元素（比如全屏切换按钮），它们的点击操作会触发音频的播放与暂停。

音频按钮可以是单个，可以是多个，可以是div，可以是img ……，你喜欢就好。记住 class="mplayer" 就行。

（二）模块不支持LRC歌词同步

仅是简单控制音频以及联动控制相关的东东，可以同步控制 ① 视频（若有，前提是 class="vid"），② SVG动画（若有），③ CSS变量 --state，前提是animation 属性中有 var(--state)。

（三）其他

① 帖子主元素若使用预设的样式，需要 class="pa"；
② 视频若希望使用预设样式，需要 class="vid"；
③ 全屏不是必须的，若不需要，可将全屏模块引用（第18行）、函数调用（第20行）、CSS代码（第4行）和HTML代码（第13行）删掉。

其他未尽事宜欢迎讨论解决。