I Am You（测试tzMaker.b）

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

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

本帖最后由马黑黑于 2025-10-9 21:19 编辑

帖子代码

<style>
   @import 'https://638183.freep.cn/638183/web/tz/tz.css';
   .pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/6g.webp') no-repeat center/cover; }
   .btnFs { right: 30px; top: 30px; }
   .ma { right: 24%; bottom: 25%; animation: climb .5s infinite alternate var(--state); }
   #wrapper { padding: 0 20px; left: 20px; top: 20px; background: #F1F3F4; clip-path: polygon(0 0,5% 50%,0 100%,100% 100%,95% 50%,100% 0); opacity: 1; }
   @keyframes climb { from { transform: skew(-2deg); } to { transform: skew(2deg); } }
</style>

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

<script type="module">
   import TZ from 'https://638183.freep.cn/638183/web/tz/tz.b.js';
   const tz = TZ.TZ('pa');

   //视频
   tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/15653652/05/64/70/64a4dbeedea08.mp4'});

   //audio外壳
   tz.add('div', 'wrapper', 'absolute sepia', {title: 'Alt+X'});

   //音频：audio播放器可见，给它披肩外套披件外套（to指令演示）
   tz.add('audio', '', '', {
      src: 'https://music.163.com/song/media/outer/url?id=2919622',
      controls: ''
   }).to(wrapper);

   //图片 : 小播
   tz.add('img', 'ma', 'ma brightness', {
      src: 'https://638183.freep.cn/150_638183/Pic/spider.png',
      title: 'Alt+X',
      alt: ''
   }).playmp3();

   //进度条演示（解开注释可见）
   //tz.bgprog('', 'prog');

   /****
   //文本演示（解开注释可见）
   tz.add('span', '', 'title-text')
      .text('I Am You')
      .style('right: 10px; bottom: 10px;');
   ****/
   tz.fs();
   if(tz.browser().name === 'Mozilla Firefox') wrapper.style.setProperty('background', '#1F0F0A');
</script>

马黑黑 发表于 2025-10-9 13:48

时间关系，也因为模块没有真正完成，tzMaker.b 的文档稍后再发布。敬请期待。

马黑黑 发表于 2025-10-9 13:51

测试帖之所以呈现 audio 播放器界面，原因有二：

一是测试 to() 指令，该指令能将 add() 指令创建的元素置入指定id的元素中；
二是进一步演示 add() 指令在添加媒体元素（audio 和 video）时第四个参数 {} 的媒体属性传入，这里主要针对 controls（媒体操控界面）。

樵歌发表于 2025-10-9 16:39

盘丝洞来滴{:4_203:}

马黑黑 发表于 2025-10-9 18:53

樵歌发表于 2025-10-9 16:39
盘丝洞来滴

流口水了木有鸭{:4_170:}

朵拉发表于 2025-10-9 22:17

漂亮效果，学生已交作业，请老师指正{:4_190:}

红影发表于 2025-10-9 22:26

tzMaker.b也已经出来了，黑黑厉害{:4_199:}

红影发表于 2025-10-9 22:30

这个还给音频披了个外套，有意思。小播也有趣，还有文字的添加，b版的功能更全了{:4_199:}

马黑黑 发表于 2025-10-9 22:40

红影发表于 2025-10-9 22:30
这个还给音频披了个外套，有意思。小播也有趣，还有文字的添加，b版的功能更全了

指令也不算太多。现在的设想尽量少量指令，三十个以内最好

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

红影发表于 2025-10-9 22:26
tzMaker.b也已经出来了，黑黑厉害

有之前的a版基础，现在只是添加一些想到要加的功能，不算啥问题

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

朵拉发表于 2025-10-9 22:17
漂亮效果，学生已交作业，请老师指正

{:4_199:}

樵歌发表于 2025-10-10 07:28

马黑黑发表于 2025-10-9 18:53
流口水了木有鸭

没有，只是喉头咽了几下{:4_170:}

马黑黑 发表于 2025-10-10 12:33

樵歌发表于 2025-10-10 07:28
没有，只是喉头咽了几下

自然反应{:4_170:}

杨帆发表于 2025-10-10 16:55

一流速度，祝贺马老师tzMaker.b闪亮登场{:4_191:}

马黑黑 发表于 2025-10-10 20:22

杨帆发表于 2025-10-10 16:55
一流速度，祝贺马老师tzMaker.b闪亮登场

{:4_190:}

樵歌发表于 2025-10-11 07:11

马黑黑发表于 2025-10-10 12:33
自然反应

{:4_169:}

马黑黑 发表于 2025-10-12 14:02

樵歌发表于 2025-10-11 07:11

傻白甜

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

背景美女养眼，黑黑现在艺术喜欢美女图了{:4_170:}

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

小辣椒发表于 2025-10-17 20:52
背景美女养眼，黑黑现在艺术喜欢美女图了

还好还好

页: [1]

花潮论坛's Archiver

I Am You（测试tzMaker.b）