华灯初上（测试tzMaker自动居中模块）

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
   
3.     .pa { --bg: url('https://638183.freep.cn/638183/t24/w7/hxdg.webp') no-repeat center/cover; }
   
4.     .vid { width: 5vw; height: 5vw; border-radius: 50%; mix-blend-mode: screen; bottom: 60px; cursor: pointer; }
   
5. </style>
   
6. 
   
7. <div class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';
    
11.     const tz = TZ.TZ('pa');
    
12.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1344119453' });
    
13.     tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/20/5b51f6ceb2cde.mp4' });
    
14.     tz.add('video', '', 'vid', {
    
15.             disablePictureInPicture: 'true',
    
16.             src: 'https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.mp4'
    
17.         }).playmp3();
    
18.     tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
    
19.     tz.fs().style('right: 20px; top: 20px;');
    
20.     tz.autoMid();
    
21. </script>

复制代码

上海朝阳

金碧辉煌

马黑黑

tz.v5.js 模块只为处理帖子自动居中，不论知不知道帖子所在父元素在浏览器视口中的偏移量。这样，在这个论坛也好，在那个博客也好，帖子元素都自动处在浏览器视口的水平中央。

功能测试中。没有做兼容性考虑，仅支持现代浏览器。

该模块不能使用 v5 以下的 CSS 文档，必须配套使用 tz.v5.css。

核心：

        tz.autoMid();

这句代码必须有，它是帖子自动“转正”的关键。

马黑黑

其它功能不变

马黑黑

首次打开帖子，如果网速不是特别快，那么，会看到帖子从有往左移动的过程。这时 JS 处理问题的习性，它需要等待文档或window加载完毕（模块使用后者）、获取到足够数据之后才能做位置调整。

自动居中功能使用 transform: translateX() 方式实现。

马黑黑

上海朝阳 发表于 2026-2-14 20:30
金碧辉煌

晚上嚎！

霜染枫丹

感谢马老师的分享，因为您提供了便利和帮助，我在这里学习了制作播放器，是一个很好的收获，影子也用的特别顺手我自己很高兴也很感谢您。进入马年了，明天要到儿子家了，在这里祝马老师新的一年焕发新的青春，百尺竿头创新的建树。吉祥平安，万事如愿。

                               
登录/注册后可看大图

马黑黑

霜染枫丹 发表于 2026-2-14 20:39
感谢马老师的分享，因为您提供了便利和帮助，我在这里学习了制作播放器，是一个很好的收获，影子也用的特别 ...

马年吉祥、万事如意、身体健康、阖家幸福！

红影

还能自动调节居中，更加智能化了，太赞了

红影

欣赏黑黑好帖

马黑黑

红影 发表于 2026-2-14 21:42
还能自动调节居中，更加智能化了，太赞了

虽如此，居中行为是在网页加载完成后才能进行，倘若页面中有某个元素的加载特别慢，会对观感有一定影响

马黑黑

红影 发表于 2026-2-14 21:42
欣赏黑黑好帖

小辣椒

黑黑我加分后帖子往右边去了，重新刷新居中回来了

小辣椒

黑黑，这个也是电饭煲做的？

马黑黑

小辣椒 发表于 2026-2-14 22:49
黑黑，这个也是电饭煲做的？

可以用，生成代码后将 css 和 js 的资源文档中的 v4 改为 v5。目前还没有修改电饭煲的相关内容。

马黑黑

小辣椒 发表于 2026-2-14 22:48
黑黑我加分后帖子往右边去了，重新刷新居中回来了

这个正常：局部刷新都不认可外部资源和JS的var声明以外的变量

小辣椒

马黑黑 发表于 2026-2-14 22:53
可以用，生成代码后将 css 和 js 的资源文档中的 v4 改为 v5。目前还没有修改电饭煲的相关内容。

哦，那我过几天去做，电饭煲修改后我做起来不用再自己修改了吧

小辣椒

马黑黑 发表于 2026-2-14 22:53
这个正常：局部刷新都不认可外部资源和JS的var声明以外的变量

哦，明白了