I Am You（测试tzMaker.b）

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

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

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

x

马黑黑 · 发表于 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（媒体操控界面）。