tzMaker版本a文档

马黑黑 · 发表于 2025-10-8 13:01

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

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

x

tzMaker 起初定位为一个小工具的ES6插件，后来工具流产、废弃，tzMaker 初稿则单独保留了下来。双节有点时间，对它做了一些修正，命名为 .a 版本，可以用来发布HTML音画帖。主要功能：

① 添加 CSS 代码，代码会放在帖子容器之前；
② 在帖子容器内添加 HTML 标签；
③ 以音频为依托，联动管理视频（若有）、CSS动画（通过 --state 变量）；
④ 支持音频播放进度显示、进度调节（可选）；
⑤ 支持全屏显示帖子（可选）；
⑥ 支持快捷键 Alt+X 控制音频播放暂停、F11 全屏切换（若启用全屏按钮）。

导入和使用 tzMaker

<div id="mydiv"></div> <script type="module"> import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'; // 导入tzMaker const tz = TZ.TZ('mydiv'); // 定义 tz 为制帖对象 // 准备音频和视频地址 const mp3 = 'https://music.163.com/song/media/outer/url?id=2744789503'; const mp4 = 'https://img.tukuppt.com/video_show/1863507/00/25/22/5f6c2c5b1c44e.mp4'; // 添加帖子CSS代码 tz.css(` #mydiv { margin: 20px auto; background: tan; width: 1024px; height: 640px; display: grid; place-items: center; position: relative; } #player { position: absolute; bottom: 50px; width: 40px; height: 40px; background: teal; animation: rot 8s linear infinite var(--state); } #prog { position: absolute;bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, red var(--prg), silver 0); border-radius: 6px; } #btnFs { position: absolute; padding: 8px; border: 2px solid beige; border-radius: 8px; } .vid { position: absolute; width: 100%; height: 100%; object-fit: cover; } @keyframes rot { to { transform: rotate(360deg); } } `); // 添加音频标签 tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''}); // 添加视频标签 tz.add('video', '', 'vid', {src: mp4, autoplay: '', loop: '', muted: true}); // 添加按钮 tz.add('div', 'player', '', {title: 'Alt+X'}).playmp3(); tz.bgprog(); // 添加进度条 tz.fs(); // 添加全屏按钮 </script>

tzMaker 指令说明：

（一）css : 在帖子容器上方加入 <style> 标签

⊙ 语法 : tz.css('CSS代码')

⊙ 说明 :

① 若css代码需要分行写，请使用反引号 `` 替代小角引号 '' 或 "" ；
② 也可以不使用此指令，直接将CSS代码构建在帖子容器上方

（二）add : 给帖子容器添加HTML子元素

⊙ 语法 : tz.add('标签名', 'id', 'class', {属性1: '值', 属性2: '值', 属性N: '值'})

⊙ 参数说明：

① 标签名必选，例如 'div' 或 'img'；
② id 必选，但可以赋空值 '' 用以占位，也可以填入标签的id名称，例如 'player'；
③ class 必选，和 id 一样设置；
④ 键值对 {} 参数可选，根据需要可设置或不设置。

⊙ 例子：tz.add( 'img', '', '', { src: 'https://mysite/pic/dog.gif', alt: '', title: 'mydog' } );

（三）playmp3 : 将刚添加的元素设置为音频播放控制器

⊙ 语法 : .playmp3

⊙ 说明 : 该指令是附属指令，链式用在 add() 指令之后

⊙ 举例 : tz.add('div', 'player', '', {title: 'Alt+X'}).playmp3()

（四）bgprog : 给帖子容器添加音频播放进度条

⊙ 语法 : tz.bgprog()

⊙ 说明 : 此指令无参数（预计a以后的版本会有），约定进度条的 id="prog"，因此需要在CSS代码中存在 #prog 选择器，用以定义进度条的样式。进度条应通过标签的线性渐变背景实现，tz.bgprog() 指令为进度条标签设置CSS变量 --prg 动态值，CSS代码背景设置类似下面的语句：

#prog { background: linear-gradient( to right, red (var--prg), lightblue 0 ); }

（五）fs : 设置全屏按钮

⊙ 语法 : tz.fs()

⊙ 说明 : fs() 指令无参数。该指令约定 ① 按钮 id="btnFs"，按钮样式在CSS代码 #btnFs 选择器中自行设置，② 作用于帖子容器，点击按钮会令帖子来回在正常模式和全屏模式之间切换

其它相关说明：

① 支持 @import 导入 CSS 资源，不论是使用独立 style 标签还是使用 tz.css() 指令设置CSS样式。

② 除附属指令 playmp3() 之外，各指令的使用没有顺序要求，但应关切HTML标签的“后来者居上”的覆盖原则，确保如播放器按钮、进度条、图片等标签不被视频或其它元素覆盖，当然也可以在CSS对应选择器中设置恰当的 z-index 属性保证目标对象不被覆盖。

③ 关于指令中的 { ... } 参数，花括号里是一对一对的键值对，可以缺省、可以留空，可以只是一个键值对，如果是多个键值对，各键值对之间用小角逗号隔开，键值对顺序不讲究。另外注意：其一，键名若带有短链接符（-），应使用小角引号将键名包裹起来（否则JS视为非法键名报错）；其二，键值为字符型应当使用小角引号包裹，纯数值、布尔值则不用）。

④ 使用 tz.add() 指令添加音视频标签，tzMaker 默认设置音视频为无控制界面、自动播放、循环播放、视频静音，如有特殊需要，可额外配置 autoplay、loop、muted 等标签属性值，模块约定这些值如果为 false 才按传参设置，否则缺省时均设为自动播放、循环播放、视频静音（音频也先设为静音再恢复）。以下语句创建一个视频标签，设为显示操控界面、不自动播放、不循环播放、不静音：

tz.add('video', '', 'pd-vid', { controls: 'controls', autoplay: false, loop: false, muted: false };

⑤ tz.add() 指令第三个参数 class 支持多列表class属性值，和HTML代码一样，多个class属性名称用空格隔开。以下语句创建一个 div 标签，该标签使用三个class列表名称：

tz.add('div', '', 'txtMid txtRed bgTan');

嗯，tzMaker .a 版本极其简单，现有功能有待完善、很多功能尚未建立。敬请期待 .b 版本。