Jaded（tzMaker.a应用演示）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz02.css';
   
3.         #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; }
   
4.         #ma { right: 30px; bottom: 50px; }
   
5.         #prog { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 10px; background: linear-gradient(to right, lightgreen var(--prg), green 0); border-radius: 5px; }
   
6.         #btnFs { right: 50px; top: 20px; color: snow; border-color: currentColor; }
   
7.         .vid { opacity: 0.9; }
   
8. </style>
   
9. 
   
10. <div id="pa"></div>
    
11. 
    
12. <script type="module">
    
13.         import TZ from 'https://638183.freep.cn/638183/web/mod/tz.a.js'
    
14.         const tz = TZ.TZ('pa'); /* 参数为帖子容器id，放在小角引号里 */
    
15.         
    
16.         /* 准备音视频地址 */
    
17.         const mp3 = 'https://music.163.com/song/media/outer/url?id=1933590';
    
18.         const mp4 = 'https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e914bc1e61.mp4';
    
19. 
    
20.         /* 添加播放按钮 ：playmp3 表示音频联动管理交给按钮 */
    
21.         tz.add('div', 'ma', '', {title: 'Alt+X'}).playmp3();
    
22. 
    
23.         /* 添加音频 ：自动+循环播放，下面的音频同此设置 */
    
24.         tz.add('audio', 'aud', '', {src: mp3, autoplay: '', loop: ''});
    
25. 
    
26.         /* 添加视频 ：muted 设为 false 启用视频声音 */
    
27.         tz.add('video', '', 'pd-vid vid', {src: mp4, autoplay: '', loop: '', muted: true});
    
28. 
    
29.         tz.bgprog(); /* 背景进度条 ：CSS设置有线性渐变背景和 --prg 变量 */
    
30. 
    
31.         tz.fs(); /* 全屏按钮 ：对应CSS选择器 #btnFs */
    
32. </script>

复制代码

小文

好喜欢！问好先生！

小辣椒

背景音乐鼓击声音配的好

小辣椒

黑黑每次的背景视频找的都那么好，这个播放器也是代码编辑的，漂亮

马黑黑

小文 发表于 2025-10-8 14:06
好喜欢！问好先生！

马黑黑

小辣椒 发表于 2025-10-8 14:09
背景音乐鼓击声音配的好

马黑黑

小辣椒 发表于 2025-10-8 14:11
黑黑每次的背景视频找的都那么好，这个播放器也是代码编辑的，漂亮

.webp 图片。svg可以做出类似效果。

这个是新的发帖方式，模块还在开发中。感谢支持！

亚伦影音工作室

马黑黑 发表于 2025-10-8 13:13
帖子代码

                               
登录/注册后可看大图

马黑黑

亚伦影音工作室 发表于 2025-10-8 21:16
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDc2Njd8YjkyY2Y5Mzl8MTc2NDQ5MDc4MXwwfA%3D%3D

我看不出你想表达什么，很抱歉。

元素被覆盖的问题在 tzMaker.a 文档中有说明。通常的原理是层级问题，另外，视频相对霸道，在很多场合制服它需要一点功夫，建议将视频设置为 position: absolute，必要时给它 z-index: -1; 的CSS属性设置。

红影

这音乐真好听，刚刚讲解了tzMaker就有相应的范例呢，很赞

亚伦影音工作室

马黑黑 发表于 2025-10-8 21:28
我看不出你想表达什么，很抱歉。

元素被覆盖的问题在 tzMaker.a 文档中有说明。通常的原理是层级问题 ...

总的来说就想说手机是这样的效果！

马黑黑

亚伦影音工作室 发表于 2025-10-8 21:35
总的来说就想说手机是这样的效果！

请确保你的浏览器内核不是古董级别的，因为我的测试没有任何你说的覆盖问题。

另外，自己创建的HTML标签请注意起始、收尾符齐全，不齐全的HTML标签会造成布局混乱。

马黑黑

红影 发表于 2025-10-8 21:35
这音乐真好听，刚刚讲解了tzMaker就有相应的范例呢，很赞

谢赞

杨帆

精彩的tzMaker.a应用演示，实现了让发帖变得更加便捷，马老师您辛苦了

马黑黑

杨帆 发表于 2025-10-8 23:18
精彩的tzMaker.a应用演示，实现了让发帖变得更加便捷，马老师您辛苦了

朵拉

酷酷的效果，学生已交作业，请老师指正

马黑黑

朵拉 发表于 2025-10-9 20:05
酷酷的效果，学生已交作业，请老师指正