X（测试新论坛帖子居中机制）
本帖最后由 马黑黑 于 2025-4-1 20:22 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
#tz { width: 1280px; height: 720px;background: #192039 url('https://638183.freep.cn/638183/t24/webp3/x.webp') no-repeat center/cover; transition: .3s; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1835389484" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/49/58/video63635686b7b48.mp4" autoplay loop></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
hcplay(tz);
const xCenter = (el) => {
const rt = el.getBoundingClientRect();
const ww = window.innerWidth;
const ox = (ww - rt.width) / 2 - rt.left;
el.style.transform = `translateX(${ox}px)`;
};
xCenter(tz);
</script>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
#tz { width: 1280px; height: 720px;background: #192039 url('https://638183.freep.cn/638183/t24/webp3/x.webp') no-repeat center/cover; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1835389484" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/49/58/video63635686b7b48.mp4" autoplay loop></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
hcplay(tz);
const xCenter = (el) => {
const rt = el.getBoundingClientRect();
const ww = window.innerWidth;
const ox = (ww - rt.width) / 2 - rt.left;
el.style.transform = `translateX(${ox}px)`;
};
xCenter(tz);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 居中机制由 JS 实现，代码在 16~22 行。
xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖子标签里 id=“tz" 那就是 xCenter(tz)，以此类推。
这个实现机制通用语所有 discuz 论坛，只需设置帖子宽高，无需考虑论坛自身的相关设定。但这个机制在本人个人网站中不适用，因为由于采用自适应机制，帖子会撑宽容器。 这个贴子1280比平时作品宽大一些。
之前用margin: 30px 0 30px calc(50% - 593px);计算令其居中。
这是新的居中方式，我刚发一个贴子，到是可以试试。{:4_199:} 花飞飞 发表于 2025-4-1 19:57
这个贴子1280比平时作品宽大一些。
之前用margin: 30px 0 30px calc(50% - 593px);计算令其居中。
这是新 ...
这个算法的特色是，不论在哪一个 基于discuz 的论坛，都通用，不用再去关系论坛主帖内容容器的偏移量 马黑黑 发表于 2025-4-1 20:01
这个算法的特色是，不论在哪一个 基于discuz 的论坛，都通用，不用再去关系论坛主帖内容容器的偏移量
用了这个新的居中，我宽度1700贴子已更改成功了{:4_173:}
音画作品居中一直是一个问题，这几行代码完美适配所有贴子。。 花飞飞 发表于 2025-4-1 20:06
用了这个新的居中，我宽度1700贴子已更改成功了
音画作品居中一直是一个问题，这几行代码完美 ...
它也有缺点：刚打开时，如果网速慢，或服务器相应慢，会看到帖子的调整位置的过程 马黑黑 发表于 2025-4-1 20:08
它也有缺点：刚打开时，如果网速慢，或服务器相应慢，会看到帖子的调整位置的过程
还赠送过程演示，岂不是又赚了。。{:4_170:}我没看到。 花飞飞 发表于 2025-4-1 20:11
还赠送过程演示，岂不是又赚了。。我没看到。
网速很快的时候，这个动作看不到 马黑黑 发表于 2025-4-1 19:49
居中机制由 JS 实现，代码在 16~22 行。
xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖 ...
看到网站里发的，不是撑宽，而是偏左。。。
还真是为论坛量身定制的呀 花飞飞 发表于 2025-4-1 20:16
看到网站里发的，不是撑宽，而是偏左。。。
还真是为论坛量身定制的呀
它显示将容器撑宽，然后左移，但它的的确确是居中的 马黑黑 发表于 2025-4-1 20:21
它显示将容器撑宽，然后左移，但它的的确确是居中的
原来如此，现在去看它又好了。。{:4_170:} 马黑黑 发表于 2025-4-1 20:11
网速很快的时候，这个动作看不到
看到看不到感觉都挺好。。我再开一遍让它演一下{:4_170:} 花飞飞 发表于 2025-4-1 20:46
原来如此，现在去看它又好了。。
不用居中机制，或研究一下，改用另外的方式 花飞飞 发表于 2025-4-1 21:01
看到看不到感觉都挺好。。我再开一遍让它演一下
其实是刷新 马黑黑 发表于 2025-4-1 19:49
居中机制由 JS 实现，代码在 16~22 行。
xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖 ...
这个更方便了，不用管帖子的宽度了，也不用计算了，可以利用JS来保证了呢{:4_199:} JS太伟大了，什么都能做啊{:4_187:} 马黑黑 发表于 2025-4-1 21:01
不用居中机制，或研究一下，改用另外的方式
还有别的方式啊。。尽管开发，我当实验的小白。。{:4_170:} 这帖子的节奏好舒服啊，一进来就觉得挺振奋，再看到有新的定位方式，更振奋{:4_173:} 马黑黑 发表于 2025-4-1 21:02
其实是刷新
就是我把网页开得多多的，然后再开它，就可以看到过渡了。{:4_173:}