华灯初上（测试帖子自动居中）

凡哥 · 发表于 2026-2-14 21:22

凡哥 · 发表于 2026-2-14 21:23

帖子代码

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

复制代码

凡哥 · 发表于 2026-2-14 21:29

帖子所使用的 JS 模块应配套使用同版本的 CSS 样式表，都是 tz.v5.*，分别是 tz.v5.js 和 tz.v5.css。

帖子自动居中通过 JS 计算并驱动实现。里面可能涉及到一些细节问题，居中的精准度存在一些误差，影响的因素主要是浮点数取整、滚动条厚度差异等。不管怎样，不用去设置帖子所在父元素的视口偏移量，一套代码发布多个平台，无需改变任何数据，这时便利。

模块居中功能刚刚写好，应该存在一些问题。