花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 58|回复: 11

[原创] 小白也可以用 tzMaker 做音画帖

[复制链接]
  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2025-10-13 20:43 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

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

    x
    本帖最后由 马黑黑 于 2025-10-13 20:49 编辑

    这个世界其实不存在小白,你多少懂一点,虽然有可能懂的没有懂王懂的多。本灌水原创标题有标题党标题嫌疑,但只是为了吸睛、增粉,可怜兮兮的说。


    酱紫,你得先理解一些做音画帖的代码结构,三个部分:

    <!-- ①  css 代码(帖子图纸),用 style 标签组织起来 -->
    <style>
        /* css 代码 */
    </style>

    <!-- ② HTML 代码(帖子实体),例如帖子容器应该是一个 div 标签,该 div 标签里可能会有N多个子标签,例如 img 图片标签 -->
    <div id="我的帖子">
        <img src="我的图片地址" alt="" />
    </div>

    <!-- ③ script 代码(帖子外交)下面的代码是伪代码,展示外交功能如何实现 -->
    <script>
        // 我的帖子.点击 = () => 音乐正在播放中吗 ? 让它暂停 : 继续播放;
    </script>

    嗯嗯,就这三件套。

    下面进入正题:怎样使用 tzMaker 做音画帖。

    啥是 tzMaker?tz 是“ 帖子”的汉语拼音首字母,Maker 是制造者。这个不懂懂王懂不懂?反正你懂的。

    好,现在,第 ① 步里,你使用 tzMaker 的配套 CSS 资源文档路径,像酱紫:

    <style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.c.css';
        .pa {
            --offsetX: 81px; /* 帖子偏移量 : 不同的论坛数据不同 */
            --bg: url('背景图片地址') no-repeat center/cover; /* 图片是音画帖的画元素,这个你真懂 */
        }
        // 这里是写可能还需要的其它css代码
    </style>

    第 ② 步是你的帖子容器 HTML 代码,它和前面三个部件的介绍没有本质区别,但更简单:

    <div id="tiezi" class="pa"></div>

    class="pa" 这个是帖子容器的类属性值,它表示使用 css 文档资源中定义的一个类别的样纸。

    现在应该是第 ③ 步了吧?数学不好,得往前数数,嗯嗯,是第 ③ 步了,帖子外交官出场,script 代码,人人可抄的作业:

    <script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.js'; // 这个是导入tzMaker 模块
        const tz = TZ.TZ('tiezi'); // tiezi 对应第二步 的 id="tiezi"
       
        // 加个MP3 : 这是音画帖的音元素,这个你也真懂
        tz.add('audio', '', '', {
                src: 'https://music.163.com/song/media/outer/url?id=1403774122'
        });
    </script>

    呕,音画帖可以发布了,就酱紫简单。

    啥?你要加个视频?你在上面第 ③ 步的最后一个分号打个回车键,加入下面的代码:

        tz.add('video', '', 'pd-vid', {
                src: '视频地址'
        });

    那个 pd-vid 是啥东东呀?pd,熊猫英文 panda 的缩写,视频来自老熊办公,绝大多数视频Logo在右上方,俺们的图纸师 tz.*.css 对它做了一些加工,你用 pd-vid 来处理它的视频,那个啥啥办公字样就看不到啦。还有处理来自钱库的,qk-vid,你从它那里贷款视频的话,就用这个 qk-vid 名称。这都是 class 名,类名,不过目前就它们俩。

    啥?还要加个漂亮的花儿让音频可以控制播放暂停?没问题,酱,你在外交官的代码里在加入下面的代码:

        tz.add('img', '', '', {
            src: '你的漂亮的花朵的地址',
            alt: '',
                title: 'Alt+X'
        }).playmp3();

    上面,最重要的首先是 src 后面的东东,它是你的图片;alt 是图片标签必须存在的属性,给它个空值;title 是提示语,鼠标滑动到图片上方会告诉观赏者你按 Alt+X 组合键会控制音乐播放暂停额。同样重要的是后面的 .playmp3(),这是设定你的漂亮的花朵可以控制音乐播放暂停的设定语句。

    还有啥?我懂(貌似我也是懂王),你要全屏切换功能,简单着呢,给外交官加一个语句吧:

        tz.fs();

    你还想要啥这里不能全都给,你可以去这里看看文档,那里有的你都能要:http://mhh.52qingyin.cn/api/tz/

    评分

    参与人数 4威望 +180 金钱 +360 经验 +180 收起 理由
    老谟深虑 + 30 + 60 + 30 赞一个!
    小辣椒 + 50 + 100 + 50 赞一个!
    红影 + 50 + 100 + 50 赞一个!
    樵歌 + 50 + 100 + 50 很给力!

    查看全部评分

  • TA的每日心情
    开心
    2025-11-30 07:59
  • 签到天数: 634 天

    [LV.9]以坛为家II

    1368

    主题

    7万

    回帖

    14万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理

    发表于 2025-10-14 06:46 | 显示全部楼层
    还是云里雾里的,我只能当搬运工
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-10-14 12:15 | 显示全部楼层
    樵歌 发表于 2025-10-14 06:46
    还是云里雾里的,我只能当搬运工

    这是被服务宠坏的说

    @小辣椒 按一楼说明做一个简易模板,你就可以上手了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-10-15 10:08 | 显示全部楼层
    这个十分完美,也十分全面,可以用最简洁的方式全部使用默认,直接就有帖子出来了。每一项里又都有各种功能的完善,都可以自己调整成想要的样式。这个的太厉害了
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-10-15 10:09 | 显示全部楼层
    黑黑从开始的设想一点点完善,一直到最后的这个完美的版本,太厉害了
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-17 10:56
  • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-10-15 10:11 | 显示全部楼层
    要想用到得心应手,还真的需要动手做一下,并一个个都用扩展的方式去实践一下,才能更体会到它的美妙
    惭愧,我前面外出了,这么好的东西也没好好学,刚回来,事情也多,还需要好好去学一下才行
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-10-15 23:44 | 显示全部楼层
    红影 发表于 2025-10-15 10:11
    要想用到得心应手,还真的需要动手做一下,并一个个都用扩展的方式去实践一下,才能更体会到它的美妙{:4_19 ...

    tzMaker的指令到时候会和帖宝捆绑在一起,搞个珠联璧合。届时,新的帖宝或许可以命名为帖宝宝?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-10-15 23:51 | 显示全部楼层
    红影 发表于 2025-10-15 10:09
    黑黑从开始的设想一点点完善,一直到最后的这个完美的版本,太厉害了

    这个 .c 版本还不能说完美,它没有歌词同步功能,不过对做一般的帖子已经完全可以应付。.d.trial 已经加入lrc歌词同步,一些细节进一步审核、优化后就相对完整一些了。

    d 之后是 e,按规划,e 的扩展方向是支持专辑发布。然后,如果还有啥需要添加的,那就是 f 版了,方向未确定,再然后可能会有 g 版,这应该是整容版了——凡大于 f 的貌似都是整容的效果

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2019-11-25 21:11
  • 签到天数: 1 天

    [LV.1]初来乍到

    1420

    主题

    6万

    回帖

    12万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹心香一瓣音画大师天籁妙音风雨同行我心永远喜乐安康中秋征文指尖上的流年花潮管理

    发表于 2025-10-17 20:47 | 显示全部楼层
    马黑黑 发表于 2025-10-14 12:15
    这是被服务宠坏的说

    叫 @小辣椒 按一楼说明做一个简易模板,你就可以上手了

    黑黑太看得起小辣椒了,小辣椒现在脑子一片浆糊的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-10-17 22:42 | 显示全部楼层
    小辣椒 发表于 2025-10-17 20:47
    黑黑太看得起小辣椒了,小辣椒现在脑子一片浆糊的

    脑浆其实和浆糊没啥区别的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-11-27 19:02
  • 签到天数: 879 天

    [LV.10]以坛为家III

    53

    主题

    1857

    回帖

    1万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪音画大师

    发表于 2025-10-18 18:39 | 显示全部楼层
                谢谢老师的无私奉献,辛苦了!我是学不会了。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-11-30 07:45
  • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-10-18 21:34 | 显示全部楼层
    老谟深虑 发表于 2025-10-18 18:39
    谢谢老师的无私奉献,辛苦了!我是学不会了。

    简单三步,学学就会。关键是指令,重要的也就那么三五个
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-11-30 15:05 , Processed in 0.076561 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表