回归传统：tz2026低调出场
<style>.showBox { font: normal 18px / 26px sans-serif; }
.showBox p { margin: 10px 0; }
.showBox code, .showBox pre { background: rgba(0,128,128,.25); padding: 2px 6px; tab-size: 4; }
.showBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.showBox pre code { padding: 0; background: none; }
</style>
<div class="showBox">
<p>tzMaker 指令虽然少之又少，文档也足够详尽，无奈JS零基础的朋友使用起来还是多少有些难度，即便有电饭煲的加持，像小辣椒这么优秀的音画帖高手仍然不能随心所欲。于是决定做一个特殊版本，tz2026，引用资源仅一个声明
<code>var tz = TZ('帖子元素')</code> 加一个指令
<code>tz.start([歌词变量])</code>，歌词帖外加一个LRC歌词声明。看代码和解释：
</p>
<pre><code><script charset="utf-8" refer src="./tz2026.js"></script>
<script>
var tz = TZ('pa');
var gc = `纯原生LRC歌词`;
tz.start(gc);
</script></code></pre>
<p>这是理想状态下的JS应用。Discuz论坛不支持内联引入JS资源，它得这样：</p>
<pre><code><script>
var jsFile = './tz2026.js';
loadJs(jsFile, tzInit);
function loadJs(url, callback) {
const 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');
var gc = `纯原生LRC歌词`;
tz.start(gc);
}
</script></code></pre>
<p>还是相对简单。简单需要一些约定：</p>
<p>
<strong>1️⃣ CSS配套文档及相关设置</strong>
</p>
<pre><code><style>
@import './tz2026.css'; /* 引入CSS文档 */
/* 帖子元素相关 : .pa 可以改为别的名称 */
.pa { --bg: url('https://帖子背景图片地址') no-repeat center/cover; }
/* 播放控制器 : 约定使用 .player 选择器 */
.player { bottom: 50px; width: 120px; height: 120px; }
/* 背景进度条 : 约定使用 .bgprog 选择器 */
.bgprog { bottom: 20px; }
/* 全屏按钮 : 约定使用 .btnFs 选择器 */
.btnFs { left: 30px; top: 30px; color: lightblue; }
/* 原生LRC歌词 : 约定使用 .lrc 选择器 */
.lrc { top: 40px; }
</style></code></pre>
<p>tz2026 支持 SVG 进度条，约定的标签 class 类名为
<code>.svgprog</code>，可以在CSS中使用该选择器设定进度条的位置。对应的 SVG 标签应使用 class="svgprog" 做标识，标签下使用 g 标签包裹三个子元素，举例如下：
</p>
<pre><code><svg class="svgprog" width="200" height="200">
<g>
<title>调节进度</title>
<path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
<path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
</g>
</svg></code></pre>
<p>其中，title 标签用于进度调整指示；两个 path 标签可以是其它的图形（例如 circle、ellipse、rect等），一个 id="track" 或 class="track"，另一个 id="prog" 或 class="prog"，prog 放置在 track之后。</p>
<p>特别注意：进度条强烈建议只使用一种，用了 SVG 进度条，就不要使用背景进度条（bgprog），反之亦然。</p>
<p>
<strong>2️⃣ HTML标签结构</strong>
</p>
<pre><code><div class="pa">
<audio src="MP3地址" autoplay loop></audio>
<video class="pd-vid" src="背景视频地址" autoplay loop muted></video>
<div class="lrc" data-skip="-0.2">HC</div>
<div class="player rotate" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs"></div>
</div></code></pre>
<ol>
<li>
<p>外层标签是帖子标签，有一个 id 或一个 class 就行，这是指令传参依据，id 或 class 名称用引号传参，
<code>var tz = TZ('pa')</code>。
</p>
</li>
<li>
<p>audio标签不多说，自动播放、循环播放记得设置。</p>
</li>
<li>
<p>视频背景 video 是熊猫的使用 pd-vid 做 class，千库的用 qk-vid，其它的用 vid，这都是CSS文档封装的样式，你只需使用相同选择器设置必要的设置（如果需要的话）。</p>
</li>
<li>
<p>lrc歌词标签约定使用 class="lrc" 类样式，帖子CSS代码中使用它定义位置即可，歌词颜色什么的都不用管。data-skip 属性用来设置歌句演唱起始时间偏移量，使用小角引号将包裹浮点数值，没有偏移量需求的可以不要此属性。</p>
</li>
<li>
<p>class="player" 标签可以使用图片（img）、视频（video）等标签，请
<strong>确保class列表中拥有 player 类名</strong>，例如示例代码中的
<code>class="player rotate"</code>，player 不能少，rotate 是动画类选择器；如果使用视频做播放器，
<code>class="player vid rotate"</code>，其中：player 必须有，vid 是预定义的视频样式，还需要在CSS中的 .vid{} 选择器设置尺寸、位置等，rotate 或 rot 都是预封装好的旋转动画，一个顺时针、一个逆时针，不需要旋转的就不用它们。
</p>
</li>
<li>
<p>背景进度条，如前已述，约定使用 class="bgprog" 类样式，帖子CSS相应代码应设置位置，可设置 color 属性定义进度指示颜色。若使用 SVG 进度条，则使用类似前面举例的 SVG 标签取代背景进度条标签，记得 CSS 代码用 .svgprog 取代 .bgprog 选择器。</p>
</li>
<li>
<p>全屏按钮设定 class 类名为 btnFs，其他设置和背景进度条相同。</p>
</li>
</ol>
<p>
<strong>3️⃣ JS代码</strong>
</p>
<p>JS代码前面已经做了举例，这里只做一些说明：</p>
<p>发纯音帖帖时，指令
<code>tz.start()</code> 不需要参数、可直接写；若是发歌词帖，则应先声明歌词变量，再在指令中使用歌词变量作为参数书写指令，例如：
</p>
<pre><code>// ... 先导代码
var gc = `原生LRC歌词`;
tz.start(gc);
// ... 其它代码</code></pre>
<p>最后，将上述演示代码完整整理如下：</p>
<pre><code><style>
@import './tz2026.css';
.pa { --bg: url('https://帖子背景图片地址') no-repeat center/cover; }
.player { bottom: 50px; width: 120px; height: 120px; }
.bgprog { bottom: 20px; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
.lrc { top: 40px; }
</style>
<div class="pa">
<audio src="MP3地址" autoplay loop></audio>
<video class="pd-vid" src="背景视频地址" autoplay loop muted></video>
<div class="lrc">HC</div>
<div class="player" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs"></div>
</div>
<script>
//var gc = `纯原生LRC歌词`; // 如果是歌词帖
var jsFile = './tz2026.js';
loadJs(jsFile, tzInit);
function loadJs(url, callback) {
const 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');
tz.start();
//tz.start(gc); //歌词帖用这句
}
</script></code></pre>
<p>【注意】</p>
<p>一、实际使用时配套的 CSS 和 JS 文件地址应改为有效的链接。</p>
<p>二、进度条如果希望使用 SVG 实现，应自行设计进度条样式，并将 CSS、HTML 中 bgprog 相关的背景进度代码调删掉。</p>
<p>三、tz2026 本质上和 tzMaker 之前推出的一系列帖子插件差不多，不同的是它脱胎于tzMaker并继承其某些特性。</p>
<p>
<strong>☪️ 结语</strong>
</p>
<p>tz2026 把HTML交给使用者，这应该是做帖较容易的部分；CSS有若干封装，仅需设置对应选择器的定位、颜色、背景、尺寸等；JS简化了指令，仅一两个声明和一个指令，代码量大大减少，制帖时不易出错。</p>
</div> 为马老师点赞！马老师辛苦了！tzv5tv5很好用呀！老师是精益求精，且一心为大家着想，为了方便我们这些小白们……{:5_106:} 回归传统，传承经典，坚持创新，操作更容易，制帖更便捷，效果更如意，祝贺马老师低调推出tz2026{:4_176:} 越设计越简便了，完全是填空式的制帖方式，进度条也能用自己喜欢的路径方式。
黑黑辛苦了，给黑黑点赞{:4_199:} 红影 发表于 2026-3-6 16:13
越设计越简便了，完全是填空式的制帖方式，进度条也能用自己喜欢的路径方式。
黑黑辛苦了，给黑黑点赞{:4_ ...
{:4_180:} 杨帆 发表于 2026-3-6 13:50
回归传统，传承经典，坚持创新，操作更容易，制帖更便捷，效果更如意，祝贺马老师低调推出tz2026
{:4_191:} 寒冬残荷 发表于 2026-3-6 13:14
为马老师点赞！马老师辛苦了！tzv5tv5很好用呀！老师是精益求精，且一心为大家着想，为了方便我们这些小白 ...
多种选择 黑黑是反复寻找制作让大家可以轻松运行的效果{:4_199:} 小辣椒 发表于 2026-3-8 15:36
黑黑是反复寻找制作让大家可以轻松运行的效果
这是因为你用不顺 tzMaker v5 系列才做的简化
页:
[1]