1️⃣ tz2026m简介
tz2026m 是专辑音画帖插件，在 tz2026 基础上加入多音频管理功能、去掉LRC歌词同步模块。同时调整了部分细节的相关实现机制。
2️⃣ 导入CSS资源及相关配置
<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('帖子背景图片') no-repeat center/cover; }
.mlist { left: 30px; top: 20px; }
.player { bottom: 50px; width: 120px; height: 120px; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style>
类选择器均为预设名称，不要更改。其中：
.p {} → 通过 --bg 变量设置背景图片。可加入其它诸如 width、height 等属性设置；
.mlist {} → 音乐有序列表，使用 ol 标签，主要设置位置，可自定义边框、背影等；
.player {} → 播放器，主要设置尺寸和定位，如果是 div 还需要配置背景图或设计其它图案；
.bgprog {} → 播放进度条，用div元素制作，这里主要做定位，可加 color 属性改变颜色；
.btfFs {} → 全屏按钮，div元素，设置定位和颜色。
3️⃣ 帖子HTML结构
<div class="pa">
<audio></audio>
<video class="pd-vid" src="视频地址" autoplay loop muted></video>
<ol class="mlist"></ol>
<img class="player rotate" src="小播图片" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>
帖子元素包裹N多子元素，帖子元素及其子元素的class属性值应与CSS类选择器相配套。子元素中：
audio → 音频标签，必须，使用极简的标签代码即可；
video → 视频标签，可选，类属性可选 pd-vid、qk-vid、vid，后者为常规样式。
ol → 音乐列表标签，ol 为有序列表，如果想用无序列表，请使用 ul 替代 ol；
img → 小播标签，必须，可以使用 div 替换（参照前面CSS部分的说明）。class属性必须有 player 类名，例中的里一个类名 rotate 是旋转选择器，可用另一个叫 rot 的代替，也可以使用自定义的动画类名代替；
div class="bgprog" → 进度条。如果使用 svg 进度条，请将此标签删掉；
div class="btnFs → 全屏按钮。
【注】HTML代码可以加入其它任何元素，所加入的元素若希望参与CSS动画管控序列，请在对应选择器CSS动画属性（animation）末尾使用 var(--state) 语句。
4️⃣ JS代码
<script>
var musics = [
['音频地址1', '音乐名1'],
['音频地址2', '音乐名2'],
['音频地址3', '音乐名3'],
['音频地址4', '音乐名4'],
];
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026m.js';
loadJs(jsFile, tzInit);
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}
function tzInit() {
var tz = TZ('pa', musics);
tz.start();
}
</script>
JS代码结构已经固化好结构，要做的事情仅是按照格式填写好 musics 数组变量即音频地址、音乐名。当然，JS代码可以加入自己需要的任何东东——只要不破原有的部分。
5️⃣ 其他说明
- 若希望使用 SVG 做进度条，请参阅
tz2026文档 相关说明。
- 当前的 CSS 样式表和 tz2026m 插件均为压缩，可下载保存为自己的文档进行修改、上传到自己的空间使用。
- 当音频列表很长，应设置 .mlist 选择器的最大高度或（和）高度，并用 overflow 属性设置滚动条。
- 未尽事宜欢迎留言讨论。
川公网安备51180202512072 )
发表于 2026-2-26 22:29
