了了子 发表于 2026-2-23 15:00

一组优美草原歌曲欣赏（测试嵌套页面自动居中）


<style>
    /* 外层容器：必须设置固定宽度，通过 transform 实现水平居中 */
    #iframeContainer {
      width: 1400px;               /* 与 iframe 宽度一致 */
      margin: 30px 0;               /* 上下边距（可根据需要调整） */
      transform: translateX(var(--offsetX, 0px));
      /* 以下样式可选，用于视觉调试，正式使用时可移除背景和边框 */
      background: transparent;
      border: none;
    }
    iframe {
      width: 100%;
      height: 800px;
      border: none;
      display: block;               /* 消除 iframe 底部的额外间隙 */
    }
</style>

<!-- 外层容器：包裹 iframe，用于居中 -->
<div id="iframeContainer">
    <iframe src="https://www.llz123.net/llz/llz/mulu/caoyuan/" frameborder="0" scrolling="no"></iframe>
</div>

<script>
(function() {
    // ----- 核心居中函数（基于原始位置计算）-----
    function centerContainer() {
      var el = document.getElementById('iframeContainer');
      if (!el) return;

      // 检查元素是否已渲染（宽度 > 0），否则延迟重试
      if (el.offsetWidth === 0) {
            setTimeout(centerContainer, 50);
            return;
      }

      // 获取当前 transform 偏移量（--offsetX）
      var curOffset = parseFloat(getComputedStyle(el).getPropertyValue('--offsetX')) || 0;

      // 元素当前实际位置（包含 transform 偏移）
      var rect = el.getBoundingClientRect();

      // 计算原始左边缘位置（未偏移前的位置）
      var originalLeft = rect.left - curOffset;

      // 目标中心 = 窗口宽度的一半
      var targetCenter = window.innerWidth / 2;

      // 元素宽度
      var width = el.offsetWidth;

      // 计算新偏移量：让元素中心对齐窗口中心
      var newOffset = targetCenter - (originalLeft + width / 2);

      // 微调（可选，根据你的需要保留或去掉）
      // newOffset -= 10;

      // 如果变化明显，则更新样式
      if (Math.abs(newOffset - curOffset) > 1) {
            el.style.setProperty('--offsetX', newOffset + 'px');
      }

      // ----- ResizeObserver：监听容器自身尺寸变化（如图片加载后高度变化）-----
      if (!window.__resizeObserver) {
            window.__resizeObserver = new ResizeObserver(function() {
                centerContainer();
            });
      }
      // 确保 observer 监听的是当前元素
      if (window.__resizeObserver.__target !== el) {
            if (window.__resizeObserver.__target) {
                window.__resizeObserver.unobserve(window.__resizeObserver.__target);
            }
            window.__resizeObserver.observe(el);
            window.__resizeObserver.__target = el;
      }
    }

    // ----- 全局事件绑定（只执行一次）-----
    if (!window.__iframeEventsBound) {
      window.__iframeEventsBound = true;

      window.addEventListener('resize', centerContainer);

      if (document.readyState === 'complete') {
            centerContainer();
      } else {
            window.addEventListener('load', centerContainer);
      }
    }

    // ----- 立即执行一次居中（带重试）-----
    centerContainer();
})();
</script>
<div style="height:200px"></div>


了了子 发表于 2026-2-23 15:04

过年有点空闲，编辑了一组嵌套发帖自动居中代码，经测试，感觉还行，同时也可以保持在手机端自动居中，代码保留了全部注释说明，可以直接复制套用。

liumang 发表于 2026-2-24 00:12

老师这个音乐真好听
{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-2-24 00:13

点了列表原来有这么多草原歌曲

{:5_146:}{:5_146:}{:5_146:}

liumang 发表于 2026-2-24 00:15

播放器和歌曲出来的列表都是同色系，小辣椒经常说的，做帖要同色系，画面才会大气，协调

{:5_150:}{:5_152:}{:5_154:}

liumang 发表于 2026-2-24 00:15

感谢了了子老师分享{:5_124:}
页: [1]
查看完整版本: 一组优美草原歌曲欣赏（测试嵌套页面自动居中）