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

The Brig（tz.c演示）

<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%;
                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: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 行代码）

红影 发表于 2025-10-13 18:17

马黑黑 发表于 2025-10-13 17:50
如果 tzMaker 能帮到你，请务必理解一下主要指令的用法，并去了解一下对应CSS文档提供的相关设计。tzMaker...

这个的 css 和 js 的封装名字是一样的呢，将那么多功能都封装起来了，这个太好了{:4_199:}

马黑黑 发表于 2025-10-13 18:19

红影 发表于 2025-10-13 18:17
这个的 css 和 js 的封装名字是一样的呢，将那么多功能都封装起来了，这个太好了

tzMaker 指令不多，目前 17 个，计划是不超过 30 个。

红影 发表于 2025-10-13 19:06

马黑黑 发表于 2025-10-13 17:50
如果 tzMaker 能帮到你，请务必理解一下主要指令的用法，并去了解一下对应CSS文档提供的相关设计。tzMaker...

等习惯和熟悉了这些指令，做帖子就变成了十分方便的事，这是黑黑带来的大福利呢{:4_199:}

杨帆 发表于 2025-10-13 19:16

热烈祝贺做贴神器tz.c横空出世{:4_199:}{:4_199:}{:4_199:}

在这么短时间推出如此精致的制帖重器实属不易{:4_180:}

是啊，哪有岁月静好，是有人在负重前行，马老师您辛苦了！{:4_176:}

马黑黑 发表于 2025-10-13 19:45

红影 发表于 2025-10-13 19:06
等习惯和熟悉了这些指令，做帖子就变成了十分方便的事，这是黑黑带来的大福利呢

福利谈不上，国武园又没批{:4_170:}

马黑黑 发表于 2025-10-13 19:46

杨帆 发表于 2025-10-13 19:16
热烈祝贺做贴神器tz.c横空出世

在这么短时间推出如此精致的制帖重器实属不 ...

矮油，你挺会说话{:4_170:}

红影 发表于 2025-10-13 20:03

马黑黑 发表于 2025-10-13 19:45
福利谈不上，国武园又没批

我们大家心里认可的福利就是福利啊，不需要批准呢{:4_199:}

杨帆 发表于 2025-10-13 20:32

马黑黑 发表于 2025-10-13 19:46
矮油，你挺会说话

呵呵，实话实说，咋想咋说，不需斟酌{:4_173:}

马黑黑 发表于 2025-10-13 20:53

杨帆 发表于 2025-10-13 20:32
呵呵，实话实说，咋想咋说，不需斟酌

承蒙谬赞{:4_170:}

马黑黑 发表于 2025-10-13 20:54

红影 发表于 2025-10-13 20:03
我们大家心里认可的福利就是福利啊，不需要批准呢
不批准不合法，得缴税

杨帆 发表于 2025-10-13 21:14

马黑黑 发表于 2025-10-13 20:53
承蒙谬赞

低调做人也是一种智慧，学习老师不骄不躁的优秀品质{:4_180:}

马黑黑 发表于 2025-10-17 12:40

杨帆 发表于 2025-10-13 21:14
低调做人也是一种智慧，学习老师不骄不躁的优秀品质

{:4_180:}

小辣椒 发表于 2025-10-17 20:48

这个好像和前面看见的那个差不多吧，没有仔细看，反正就看见进度条了{:4_189:}

小辣椒 发表于 2025-10-17 20:48

画面大气，找的音乐特别震撼{:4_199:}

马黑黑 发表于 2025-10-17 22:41

小辣椒 发表于 2025-10-17 20:48
这个好像和前面看见的那个差不多吧，没有仔细看，反正就看见进度条了

它们有一样的地方，也有不一样的地方。近期这些系列帖子都是围绕 tz.x 演示或测试用的
页: [1] 2
查看完整版本: The Brig（tz.c演示）