The Brig（tz.c演示）

马黑黑 · 发表于 2025-10-13 17:36

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

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

x

马黑黑 · 发表于 2025-10-13 17:37

代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.c.css';
.pa {
--offsetX: 81px;
--bg: tan url('https://638183.freep.cn/638183/t24/w6/brig.webp') no-repeat center/cover;
}
/* 进度条加壳 */
.prog::before {
position: absolute;
content: '';
top: -20px;
width: 110%;
height: 50px;
background: rgba(160,82,44,.45);
border-radius: 20% 25% 30% 40%;
/* 随手剪裁一下 : 不考虑兼容 55 以下 chrome 浏览器可以不要 -webkit- 前缀 */
clip-path: polygon(0 0, 35% 10%, 35% 35%, 65% 35%, 65% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
}
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.js'; // 导入模块
const tz = TZ.TZ('pa'); // 声明 tz 对象
// 视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2422006/00/02/13/5b5192c149996.mp4'
});
// 音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=2603659217'
});
// 图片小播
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/2025/rudder.webp',
alt: '',
title: 'Alt+X',
style: '--ma-size: 4vw; bottom: 40px;'
}).playmp3();
// 进度条
tz.bgprog().style('bottom: 20px;');
// 全屏
tz.fs().style('bottom: 20px; right: 20px');
</script>

复制代码

马黑黑 · 发表于 2025-10-13 17:43

tzMaker.c 已经杀青，文档因结构问题不好弄来这里，感兴趣的朋友请移步：

http://mhh.52qingyin.cn/api/tz/

可以将文档源码保存备份，以备不时之需。

本演示，如果去掉进度条装饰壳（CSS代码）、去掉注释，代码很简洁。

值得注意的是，简单的CSS设置可以借助 tz 指令完成，请参考第 39 行、第 42 行、第 44 行代码。

马黑黑 · 发表于 2025-10-13 17:50

如果 tzMaker 能帮到你，请务必理解一下主要指令的用法，并去了解一下对应CSS文档提供的相关设计。tzMaker 和对应的CSS文档资源存在深度配套关系，使用得当既能让帖子代码简洁，更能事半功倍（不用重新设计和制造轮子）。

马黑黑 · 发表于 2025-10-13 17:58

关于音频播放时间显示位置：

.prog {} 选择器中，使用了 .prog::after {} 伪元素做时间显示，默认设置宽度 150%、文本两端对齐，如果需要更改位置，比如让文字调整到上方显示，请在CSS代码中创建::after 伪元素，只需在里面设置长度、位置即可，当然还可以修改文本颜色：

.prog::after {
width: 100%;
top: -40px; /* 或更恰当的数值 */
color: yellow; /* 如果有必要改变前景色 */
}

时间信息文本颜色还可以在 tz.prog 指令的 style() 链式指令中加入： --color: #336699;（第 42 行代码）