华灯初上（测试tzMaker自动居中模块）转自马黑的教程发布

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=90690&extra=

admin

<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>

admin

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

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

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

核心：

        tz.autoMid();

admin

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

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

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=90695


tz.v5.js 模块说明
tz.v5.js 模块说明
tzMaker v5主要处理帖子自适应居中功能，目标是不论帖子出于何种页面环境，它都能自动居中，发帖者无需考虑帖子所在父元素在浏览器视口中的偏移问题。这样，一套代码可以发到不同设置的论坛、博客、网站，不必做任何改动。

实现原理
通过浏览器视口宽度、帖子原始位置、帖子尺寸等已知条件计算除帖子居中的偏移量，使用 transform 的 translateX 在水平方向移动帖子。

可能存在的误差
帖子居中的精准度针对浏览器视口，由于浏览器存在出现纵向滚动条，在视觉上居中的精准度应该存在一定误差；此外，HTML相关属性不支持浮点数，这也在理论上产生计算结果和显示效果存在一定的差异。

使用方法
导入的 CSS 和 JS 文档要配套，分别是 tz.v5.css 和 tz.v5.js；
JS 代码末尾假如指令 tz.autoMid(); 。
其它
模块的其它功能不做任何改变，过去怎么用现在就怎么用。

如果使用帖子电饭煲创建代码，记得把 v4 改为 v5，同时删掉 --offsetX CSS变量设置。

admin

花潮论坛马黑教程专辑：https://www.huachaowang.com/forum.php?mod=viewthread&tid=90288&pid=2512305&page=1&extra=#pid2512305
马黑博客：https://mahei.ccccocccc.cc/