Jaded（tzMaker.a应用演示）
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/jaded.webp') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
#ma { right: 30px; bottom: 50px; }
#prog { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, lightgreen var(--prg), green 0); border-radius: 5px; }
#btnFs { right: 50px; top: 20px; color: snow; border-color: currentColor; }
.vid { opacity: 0.9; }
</style>
<div id="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'
const tz = TZ.TZ('pa'); /* 参数为帖子容器id，放在小角引号里 */
/* 准备音视频地址 */
const mp3 = 'https://music.163.com/song/media/outer/url?id=1933590';
const mp4 = 'https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e914bc1e61.mp4';
/* 添加播放按钮 ：playmp3 表示音频联动管理交给按钮 */
tz.add('div', 'ma', '', {title: 'Alt+X'}).playmp3();
/* 添加音频 ：自动+循环播放，下面的音频同此设置 */
tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''});
/* 添加视频 ：muted 设为 false 启用视频声音 */
tz.add('video', '', 'pd-vid vid', {src: mp4, autoplay: '', loop: '', muted: true});
tz.bgprog(); /* 背景进度条 ：CSS设置有线性渐变背景和 --prg 变量 */
tz.fs(); /* 全屏按钮 ：对应CSS选择器 #btnFs */
</script> 本帖最后由 马黑黑 于 2025-10-8 13:15 编辑
帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/jaded.webp') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
#ma { right: 30px; bottom: 50px; }
#prog { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, lightgreen var(--prg), green 0); border-radius: 5px; }
#btnFs { right: 50px; top: 20px; color: snow; border-color: currentColor; }
.vid { opacity: 0.9; }
</style>
<div id="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'
const tz = TZ.TZ('pa'); /* 参数为帖子容器id，放在小角引号里 */
/* 准备音视频地址 */
const mp3 = 'https://music.163.com/song/media/outer/url?id=1933590';
const mp4 = 'https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e914bc1e61.mp4';
/* 添加播放按钮 ：playmp3 表示音频联动管理交给按钮 */
tz.add('div', 'ma', '', {title: 'Alt+X'}).playmp3();
/* 添加音频 ：自动+循环播放，下面的音频同此设置 */
tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''});
/* 添加视频 ：muted 设为 false 启用视频声音 */
tz.add('video', '', 'pd-vid vid', {src: mp4, autoplay: '', loop: '', muted: true});
tz.bgprog(); /* 背景进度条 ：CSS设置有线性渐变背景和 --prg 变量 */
tz.fs(); /* 全屏按钮 ：对应CSS选择器 #btnFs */
</script>
好喜欢！问好先生！ 背景音乐鼓击声音配的好 黑黑每次的背景视频找的都那么好，这个播放器也是代码编辑的，漂亮 小文 发表于 2025-10-8 14:06
好喜欢！问好先生！
{:4_191:} 小辣椒 发表于 2025-10-8 14:09
背景音乐鼓击声音配的好
{:4_180:} 小辣椒 发表于 2025-10-8 14:11
黑黑每次的背景视频找的都那么好，这个播放器也是代码编辑的，漂亮
.webp 图片。svg可以做出类似效果。
这个是新的发帖方式，模块还在开发中。感谢支持！ 马黑黑 发表于 2025-10-8 13:13
帖子代码
https://file.uhsea.com/2510/f5563d5c7a62d77b078e9ffa42bd9a427H.jpg
亚伦影音工作室 发表于 2025-10-8 21:16
attach://47667.jpg
我看不出你想表达什么，很抱歉。
元素被覆盖的问题在 tzMaker.a 文档中有说明。通常的原理是层级问题，另外，视频相对霸道，在很多场合制服它需要一点功夫，建议将视频设置为 position: absolute，必要时给它 z-index: -1; 的CSS属性设置。 这音乐真好听，刚刚讲解了tzMaker就有相应的范例呢，很赞{:4_199:} 马黑黑 发表于 2025-10-8 21:28
我看不出你想表达什么，很抱歉。
元素被覆盖的问题在 tzMaker.a 文档中有说明。通常的原理是层级问题 ...
总的来说就想说手机是这样的效果！ 亚伦影音工作室 发表于 2025-10-8 21:35
总的来说就想说手机是这样的效果！
请确保你的浏览器内核不是古董级别的，因为我的测试没有任何你说的覆盖问题。
另外，自己创建的HTML标签请注意起始、收尾符齐全，不齐全的HTML标签会造成布局混乱。 红影 发表于 2025-10-8 21:35
这音乐真好听，刚刚讲解了tzMaker就有相应的范例呢，很赞
谢赞 精彩的tzMaker.a应用演示，实现了让发帖变得更加便捷，马老师您辛苦了{:4_176:} 杨帆 发表于 2025-10-8 23:18
精彩的tzMaker.a应用演示，实现了让发帖变得更加便捷，马老师您辛苦了
{:4_191:} 酷酷的效果，学生已交作业，请老师指正{:4_190:} 朵拉 发表于 2025-10-9 20:05
酷酷的效果，学生已交作业，请老师指正
{:4_199:}
页:
[1]