华灯初上（测试tzMaker自动居中模块）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w7/hxdg.webp') no-repeat center/cover; }
.vid { width: 5vw; height: 5vw; border-radius: 50%; mix-blend-mode: screen; bottom: 60px; cursor: pointer; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1344119453' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/20/5b51f6ceb2cde.mp4' });
tz.add('video', '', 'vid', {
disablePictureInPicture: 'true',
src: 'https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.mp4'
}).playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
tz.fs().style('right: 20px; top: 20px;');
tz.autoMid();
</script> 帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w7/hxdg.webp') no-repeat center/cover; }
.vid { width: 5vw; height: 5vw; border-radius: 50%; mix-blend-mode: screen; bottom: 60px; cursor: pointer; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1344119453' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/20/5b51f6ceb2cde.mp4' });
tz.add('video', '', 'vid', {
disablePictureInPicture: 'true',
src: 'https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.mp4'
}).playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
tz.fs().style('right: 20px; top: 20px;');
tz.autoMid();
</script>
金碧辉煌 tz.v5.js 模块只为处理帖子自动居中，不论知不知道帖子所在父元素在浏览器视口中的偏移量。这样，在这个论坛也好，在那个博客也好，帖子元素都自动处在浏览器视口的水平中央。
功能测试中。没有做兼容性考虑，仅支持现代浏览器。
该模块不能使用 v5 以下的 CSS 文档，必须配套使用 tz.v5.css。
核心：
tz.autoMid();
这句代码必须有，它是帖子自动“转正”的关键。 其它功能不变 首次打开帖子，如果网速不是特别快，那么，会看到帖子从有往左移动的过程。这时 JS 处理问题的习性，它需要等待文档或window加载完毕（模块使用后者）、获取到足够数据之后才能做位置调整。
自动居中功能使用 transform: translateX() 方式实现。 上海朝阳 发表于 2026-2-14 20:30
金碧辉煌
晚上嚎！ 感谢马老师的分享，因为您提供了便利和帮助，我在这里学习了制作播放器，是一个很好的收获，影子也用的特别顺手我自己很高兴也很感谢您。进入马年了，明天要到儿子家了，在这里祝马老师新的一年焕发新的青春，百尺竿头创新的建树。吉祥平安，万事如愿。
https://ff.xiaoqiaodali.top:5401/i/2026/02/14/6990494cced33.gif
霜染枫丹 发表于 2026-2-14 20:39
感谢马老师的分享，因为您提供了便利和帮助，我在这里学习了制作播放器，是一个很好的收获，影子也用的特别 ...
马年吉祥、万事如意、身体健康、阖家幸福！ 还能自动调节居中，更加智能化了，太赞了{:4_199:} 欣赏黑黑好帖{:4_199:} 红影 发表于 2026-2-14 21:42
还能自动调节居中，更加智能化了，太赞了
虽如此，居中行为是在网页加载完成后才能进行，倘若页面中有某个元素的加载特别慢，会对观感有一定影响 红影 发表于 2026-2-14 21:42
欣赏黑黑好帖
{:4_190:} 黑黑我加分后帖子往右边去了，重新刷新居中回来了 黑黑，这个也是电饭煲做的？ 小辣椒 发表于 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声明以外的变量
哦，明白了 哇，厉害了~帖子元素自动居中。祝马老师新春快乐，马年大吉{:4_176:}
页:
[1]
2