tzMaker版本a文档
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>tzMaker 起初定位为一个小工具的ES6插件，后来工具流产、废弃，tzMaker 初稿则单独保留了下来。双节有点时间，对它做了一些修正，命名为 .a 版本，可以用来发布HTML音画帖。主要功能：</p>
<blockquote>
① 添加 CSS 代码，代码会放在帖子容器之前；<br>
② 在帖子容器内添加 HTML 标签；<br>
③ 以音频为依托，联动管理视频（若有）、CSS动画（通过 --state 变量）；<br>
④ 支持音频播放进度显示、进度调节（可选）；<br>
⑤ 支持全屏显示帖子（可选）；<br>
⑥ 支持快捷键 Alt+X 控制音频播放暂停、F11 全屏切换（若启用全屏按钮）。
</blockquote>
<h3>导入和使用 tzMaker</h3>
<div class="codebox" data-prev="1">
<txt-green><!-- 帖子容器 --></txt-green>
<div id="mydiv"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'; <txt-green>// 导入tzMaker </txt-green>
const tz = TZ.TZ('mydiv'); <txt-green>// 定义 tz 为制帖对象 </txt-green>
<txt-green>// 准备音频和视频地址 </txt-green>
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';
<txt-green>// 添加帖子CSS代码 </txt-green>
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); } }
`);
<txt-green>// 添加音频标签 </txt-green>
tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''});
<txt-green>// 添加视频标签 </txt-green>
tz.add('video', '', 'vid', {src: mp4, autoplay: '', loop: '', muted: true});
<txt-green>// 添加按钮 </txt-green>
tz.add('div', 'player', '', {title: 'Alt+X'}).playmp3();
tz.bgprog(); <txt-green>// 添加进度条 </txt-green>
tz.fs(); <txt-green>// 添加全屏按钮 </txt-green>
</script>
</div>
<h3>tzMaker 指令说明：</h3>
<p>（一）css : 在帖子容器上方加入 <style> 标签</p>
<blockquote>
⊙ 语法 : <mark>tz.css('CSS代码')</mark><br><br>
⊙ 说明 : <br><br>
① 若css代码需要分行写，请使用反引号 <mark>``</mark> 替代小角引号 <mark>'' </mark> 或 <mark>"" </mark>；<br>
② 也可以不使用此指令，直接将CSS代码构建在帖子容器上方
</blockquote>
<p>（二）add : 给帖子容器添加HTML子元素</p>
<blockquote>
⊙ 语法 : <mark>tz.add('标签名', 'id', 'class', {属性1: '值', 属性2: '值', 属性N: '值'})</mark><br><br>
⊙ 参数说明：<br><br>
① 标签名必选，例如 'div' 或 'img'；<br>
② id 必选，但可以赋空值 '' 用以占位，也可以填入标签的id名称，例如 'player'；<br>
③ class 必选，和 id 一样设置；<br>
④ 键值对 {} 参数可选，根据需要可设置或不设置。<br><br>
⊙ 例子 ：tz.add( 'img', '', '', { src: 'https://mysite/pic/dog.gif', alt: '', title: 'mydog' } );
</blockquote>
<p>（三）playmp3 : 将刚添加的元素设置为音频播放控制器</p>
<blockquote>
⊙ 语法 : <mark>.playmp3</mark><br><br>
⊙ 说明 : 该指令是附属指令，链式用在 add() 指令之后<br><br>
⊙ 举例 : tz.<txt-red>add</txt-red>('div', 'player', '', {title: 'Alt+X'}).<txt-red>playmp3()</txt-red>
</blockquote>
<p>（四）bgprog : 给帖子容器添加音频播放进度条</p>
<blockquote>
⊙ 语法 : <mark>tz.bgprog()</mark><br><br>
⊙ 说明 : 此指令无参数（预计a以后的版本会有），约定进度条的 id="<txt-red>prog</txt-red>"，因此需要在CSS代码中存在 <txt-red>#prog</txt-red> 选择器，用以定义进度条的样式。进度条应通过标签的线性渐变背景实现，tz.bgprog() 指令为进度条标签设置CSS变量 --prg 动态值，CSS代码背景设置类似下面的语句：<br><br>
#prog { background: linear-gradient( to right, <txt-red>red (var--prg)</txt-red>, lightblue 0 ); }
</blockquote>
<p>（五）fs : 设置全屏按钮</p>
<blockquote>
⊙ 语法 : <mark>tz.fs()</mark><br><br>
⊙ 说明 : fs() 指令无参数。该指令约定 ① 按钮 id="btnFs"，按钮样式在CSS代码 #btnFs 选择器中自行设置，② 作用于帖子容器，点击按钮会令帖子来回在正常模式和全屏模式之间切换
</blockquote>
<h3>其它相关说明：</h3>
<blockquote>
① 支持 @import 导入 CSS 资源，不论是使用独立 style 标签还是使用 tz.css() 指令设置CSS样式。<br><br>
② 除附属指令 playmp3() 之外，各指令的使用没有顺序要求，但应关切HTML标签的“后来者居上”的覆盖原则，确保如播放器按钮、进度条、图片等标签不被视频或其它元素覆盖，当然也可以在CSS对应选择器中设置恰当的 z-index 属性保证目标对象不被覆盖。<br><br>
③ 关于指令中的 { ... } 参数，花括号里是一对一对的键值对，可以缺省、可以留空，可以只是一个键值对，如果是多个键值对，各键值对之间用小角逗号隔开，键值对顺序不讲究。另外注意：其一，键名若带有短链接符（-），应使用小角引号将键名包裹起来（否则JS视为非法键名报错）；其二，键值为字符型应当使用小角引号包裹，纯数值、布尔值则不用）。<br><br>
④ 使用 tz.add() 指令添加音视频标签，tzMaker 默认设置音视频为无控制界面、自动播放、循环播放、视频静音，如有特殊需要，可额外配置 autoplay、loop、muted 等标签属性值，模块约定这些值如果为 false 才按传参设置，否则缺省时均设为自动播放、循环播放、视频静音（音频也先设为静音再恢复）。以下语句创建一个视频标签，设为显示操控界面、不自动播放、不循环播放、不静音：<br><br>
tz.add('video', '', 'pd-vid', { controls: 'controls', autoplay: false, loop: false, muted: false };<br><br>
⑤ tz.add() 指令第三个参数 class 支持多列表class属性值，和HTML代码一样，多个class属性名称用空格隔开。以下语句创建一个 div 标签，该标签使用三个class列表名称：<br><br>
tz.add('div', '', 'txtMid txtRed bgTan');<br><br>
</blockquote>
<p>嗯，tzMaker .a 版本极其简单，现有功能有待完善、很多功能尚未建立。敬请期待 .b 版本。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 发现一种情况点击预览的时候，播放器按钮不被视频遮挡，用源代码编辑音画只要有视频就会遮挡一切！ 亚伦影音工作室 发表于 2025-10-8 16:18
发现一种情况点击预览的时候，播放器按钮不被视频遮挡，用源代码编辑音画只要有视频就会遮挡一切！
若存在此种情况，可以给按钮的CSS代码加上 z-index: 999; ，这样可以把按钮的层级提升到很高的位置 马黑黑 发表于 2025-10-8 18:35
若存在此种情况，可以给按钮的CSS代码加上 z-index: 999; ，这样可以把按钮的层级提升到很高的位置
我指的手机欣赏的时候视频遮挡了播放器和歌词。当然电脑很正常！手机点你预览很好，但代码直接用在论坛，手机欣赏视频遮挡播放器和歌词等！ 亚伦影音工作室 发表于 2025-10-8 19:15
我指的手机欣赏的时候视频遮挡了播放器和歌词。当然电脑很正常！手机点你预览很好，但代码直接用在论坛， ...
请用手机访问我今天的帖子 Jaded，看看播放器是不是被遮挡。我恰好用手机 X浏览器 和 EDGE浏览器 检测过帖子效果，一切正常。
另：手机浏览器版本很重要，时至今日，版本不能太低，毕竟现在的前端标准已经不再考虑兼容旧版浏览器了。 请问马大师：不知道我套用整个，只换：https://music.163.com/song/media/outer/url?id=2744789503，这行可否？{:4_190:} 过节还不休息，把这个工具完善了，真不容易{:4_187:} 这个好像所有的设置都在js里呢，不过功能很全，该有的都有了{:4_199:} 红影 发表于 2025-10-8 21:17
这个好像所有的设置都在js里呢，不过功能很全，该有的都有了
功能不齐全，还有的有的有有的没有，比如你要给某个子元素或帖子容器加文本，.a 版本还没有实现 红影 发表于 2025-10-8 21:15
过节还不休息，把这个工具完善了，真不容易
居家休息，随时待命 樵歌 发表于 2025-10-8 20:43
请问马大师：不知道我套用整个，只换：https://music.163.com/song/media/outer/url?id=2744789503，这行可 ...
当然可以。你还可以换CSS里的背景图片、小播图片等等 马黑黑 发表于 2025-10-8 21:23
功能不齐全，还有的有的有有的没有，比如你要给某个子元素或帖子容器加文本，.a 版本还没有实现
差不多都全了啊，加文本等等已经是额外的了{:4_187:} 马黑黑 发表于 2025-10-8 21:24
居家休息，随时待命
那还不能算完全的休息呢。 红影 发表于 2025-10-8 22:41
差不多都全了啊，加文本等等已经是额外的了
这个加文本是小事，只是还没做。文本不是额外的，是基本功能。 红影 发表于 2025-10-8 22:42
那还不能算完全的休息呢。
这是养猪人的尴尬：人可以放假，猪猪得吃喝。 广大音画爱好者的福音，期待 .b 版本早日面世，为马老师再创新品点赞{:4_199:} 杨帆 发表于 2025-10-8 23:28
广大音画爱好者的福音，期待 .b 版本早日面世，为马老师再创新品点赞
感谢支持 马黑黑 发表于 2025-10-8 21:24
当然可以。你还可以换CSS里的背景图片、小播图片等等
{:4_176:}那太好了{:4_191:} 樵歌 发表于 2025-10-9 08:13
那太好了
{:4_180:}
页:
[1]