马黑黑老师《音画帖快手》

醉美水芙蓉

音画帖快手

专辑

CSS代码

重置CSS代码

html代码

重置HTML代码

JS代码 预览帖子效果

重置JS代码 复制帖子代码

showToast

醉美水芙蓉

音画帖快手 基于 tz2026.js 插件，使用它将生成可在线预览效果的音画帖，支持一件复制音画帖代码。 音画帖源码已另发帖公布。 使用方法： 在一楼，音画帖代码结构分为三部分： 其一，CSS代码。需要在原始代码中修改几个地方，例如 .pa 的背景图片、.* 的位置、颜色等。可以加入自己需要的选择器（并在HTML代码结构中加入对应的标签）； 其二，HTML代码。这里的标签无法就是音频、视频、小播、进度条、全屏按钮等，可能对应于CSS相关选择器。可根据设计自行插入其它必要的标签； 其三，JS代码。这里的代码结构基本不用改变，除非需要加入帖子的其它实现机制。 预览帖子效果前应事先在上述三部分做完所有该做的工作，如果效果满意，可点击“复制帖子代码”按钮拿到帖子代码。 【附·说明】tz2026.js 插件生成的帖子代码自适应居中，之前介绍过的。 2026/3/27补充：关于代码框中的注释代码 （一）CSS代码中有一行， /* .lrc { top: 30px; } */ ，这是为做LRC歌词同步帖准备，若制作的是歌词同步帖，请把注释打开，即将 /* 和 */ 都删掉。如果做无歌词同步帖，整句删掉； （二）HTML代码有两行，一行是视频标签，另一行是LRC歌词标签，视情况解开注释或删掉。HTML注释结构为 <!-- 被注释的内容 --> ，将头尾的 <!-- 和 --> 删掉即解开注释。不使用视频标签或LRC歌词标签的删掉整句； （三）JS代码有两成注释，都针对 LRC歌词同步：第一处是多行注释，解开注释的方式参考（一）所描述的方法；第二处是 // tz.start(gc); ，解开注释的方法是把把它前面的代码删掉，把注释前缀 \\ 符号删掉。如果不是发歌词帖，两处注释代码单元整体删掉。

daozhichuangli

分享很精彩，点赞表心意

玖月

感谢分享，增长知识见识

klxf

很实用，谢谢醉美管理员精彩分享

esegolusy

分享超棒，点赞支持呀