在雨中（tzMaker d.trial应用测试）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/rain.webp') no-repeat center/cover; --ma-size: 3vw; }
/* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
.rect { width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
const tz = TZ.TZ('pa');
// 歌词（花朝格式）
let geci = [ , , , , , , , , , , 有異議",4.6], , , , 有異議",4.3], , , , , , , , , , , , , 有異議",4.5], , , ,有異議",4.8], , , , 有異議",4.5], , , , ];
// 大熊视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4'
});
// 加上音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1408969463'
});
/** 以下创建LRC歌词同步标签
除left、top定位必须设置，其余可以缺省使用默认配置
style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
指令里面的内容需要分行写时使用反引号，写在一行可用单引号
**/
tz.lrc(geci).style(`
left: 20px; /* 定位 : 必须 */
top: 20px; /* 定位 : 必须 */
color: silver; /* 前景色 : 可选（默认wheat）*/
writing-mode: vertical-lr;/* 排版方向 : 可选（默认横向）*/
--rect: 0 0 100% 0; /* 排版方向配套属性 : 可选（默认0 100% 0 0）*/
--c1: white; /* 渐变颜色1 : 可选（默认橙色）*/
--c2: cyan; /* 渐变颜色2 : 可选（默认黄色）*/
--deg: to left;/* 渐变角度或方向 : 可选（默认180deg）*/
--border: 0 1px 0 0;/* 同步线条 : 可选（默认0 0 1px 0）*/
`);
// 创建进度条 : 设置位置和进度颜色
tz.bgprog().style('left: calc(30% - 70px); bottom: 20px; --prog: lightblue;');
// 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
tz.add('div', 'player', 'wrap100 rot-ani cursor', {
title: 'Alt+X', style: 'left: 30%; bottom: 50px; place-items: start center;'
}).playmp3();
// 小播内部零件装进 id="player" 标签
tz.lzRot(8, 'player', {className: 'rect'});
// 全屏 : 并设置定位和颜色
tz.fs().style('top: 20px; right: 20px; color: lightblue;');
</script> 代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/rain.webp') no-repeat center/cover; --ma-size: 3vw; }
/* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
.rect { width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
const tz = TZ.TZ('pa');
// 歌词（花朝格式）
let geci = [ , , , , , , , , , , 有異議",4.6], , , , 有異議",4.3], , , , , , , , , , , , , 有異議",4.5], , , ,有異議",4.8], , , , 有異議",4.5], , , , ];
// 大熊视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4'
});
// 加上音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1408969463'
});
/** 以下创建LRC歌词同步标签
除left、top定位必须设置，其余可以缺省使用默认配置
style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
指令里面的内容需要分行写时使用反引号，写在一行可用单引号
**/
tz.lrc(geci).style(`
left: 20px; /* 定位 : 必须 */
top: 20px; /* 定位 : 必须 */
color: silver; /* 前景色 : 可选（默认wheat）*/
writing-mode: vertical-lr;/* 排版方向 : 可选（默认横向）*/
--rect: 0 0 100% 0; /* 排版方向配套属性 : 可选（默认0 100% 0 0）*/
--c1: white; /* 渐变颜色1 : 可选（默认橙色）*/
--c2: cyan; /* 渐变颜色2 : 可选（默认黄色）*/
--deg: to left;/* 渐变角度或方向 : 可选（默认180deg）*/
--border: 0 1px 0 0;/* 同步线条 : 可选（默认0 0 1px 0）*/
`);
// 创建进度条 : 设置位置和进度颜色
tz.bgprog().style('left: calc(30% - 70px); bottom: 20px; --prog: lightblue;');
// 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
tz.add('div', 'player', 'wrap100 rot-ani cursor', {
title: 'Alt+X', style: 'left: 30%; bottom: 50px; place-items: start center;'
}).playmp3();
// 小播内部零件装进 id="player" 标签
tz.lzRot(8, 'player', {className: 'rect'});
// 全屏 : 并设置定位和颜色
tz.fs().style('top: 20px; right: 20px; color: lightblue;');
</script>
tzMaker d 版对标歌词同步。由于开发基于 ES 环境，加入新功能相对简单，且歌词同步功能早做有独特的可移植模块，所以从 c 升到 d 不费力气，调整、测试用了点时间。
tz.d 很容易实现竖版歌词，原因主要是：歌词同步的实现方式是切割路径 clip-path，用的是基本形状切割 inset，内部矩形。
歌词标签的设置略微琐细，这是没有办法的——不精细打磨出不了精品。 谢谢黑黑老师辛苦！{:4_187:} 本帖最后由 杨帆 于 2025-10-14 20:21 编辑
马老师无私奉献悉心探索精益求精
打造tzMaker品质步步高水准节节高：a→b→c→d……
马老师您辛苦了！{:4_180:}
老师就是老师，看播放的位置就知道了！ 梦江南 发表于 2025-10-14 14:41
谢谢黑黑老师辛苦！
{:4_190:} 杨帆 发表于 2025-10-14 19:28
马老师无私奉献悉心探索精益求精
打造tzMaker品质步步高水准节节高：a→b→c→d……
据说最大是G{:4_170:} 樵歌 发表于 2025-10-14 19:33
老师就是老师，看播放的位置就知道了！
这个有啥说道？{:4_170:} 马黑黑 发表于 2025-10-14 20:53
据说最大是G
很有可能，据说指令 ≤ 30 马黑黑 发表于 2025-10-14 20:53
这个有啥说道？
它该呆的地方呀{:4_173:} 樵歌 发表于 2025-10-14 21:15
它该呆的地方呀
酱紫呀？俺做过养猪场办公室副主任助理的秘书的帮手，倒是知道一些安排座位的事情{:4_196:} 杨帆 发表于 2025-10-14 21:04
很有可能，据说指令 ≤ 30
指令越少越好，多了吓人 精彩制作，学生已交作业，请老师指正{:4_190:} 本帖最后由 杨帆 于 2025-10-14 23:38 编辑
马黑黑 发表于 2025-10-14 22:13
指令越少越好，多了吓人
是的，在保障功能复用性同时，还兼有较好的扩展性。
又升级一个版本呢，这个带歌词了，真是越来越完善了{:4_199:} 红影 发表于 2025-10-15 14:24
又升级一个版本呢，这个带歌词了，真是越来越完善了
这是大概的样纸，一些细节还需要进一步分析、调整 杨帆 发表于 2025-10-14 23:06
是的，在保障功能复用性同时，还兼有较好的扩展性。
插件、模块都是可复用的 上来先看看黑黑的分享，这个有进度条的，小辣椒看看套用做一个可以不可以，现在脑子笨了 小辣椒 发表于 2025-10-17 20:45
上来先看看黑黑的分享，这个有进度条的，小辣椒看看套用做一个可以不可以，现在脑子笨了
这些都是 tzMaker 模块，针对不同的版本测试、演示
页:
[1]