论坛首页 › 播放器版 › 一组优美草原歌曲欣赏

llz123 发表于 2026-2-23 19:12:28

一组优美草原歌曲欣赏

本帖最后由 llz123 于 2026-2-23 19:16 编辑 <br /><br /><style>
    /* 外层容器：必须设置固定宽度，通过 transform 实现水平居中 */
    #iframeContainer {
      width: 1400px;               /* 与 iframe 宽度一致 */
      margin: 120px 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:50px"></div>

llz123 发表于 2026-2-23 19:23:28

春节有点空闲，捣鼓了一个嵌套页面自动居中代码，已在多个论坛测试，效果还行，大多数论坛应该可以通用，相关代码均保留了注释说明，如果发空间帖可以直接复制套用，不用再费神去设置div定位。直接原始码发论坛的居中代码也测试成功，过几天发上来。

醉美水芙蓉 发表于 2026-2-23 20:43:05

欣赏学习老师精彩播放器！

醉美水芙蓉 发表于 2026-2-23 20:43:20

祝老师玩得开心！

klxf 发表于 2026-2-24 20:05:36

llz123 发表于 2026-2-23 19:23
春节有点空闲，捣鼓了一个嵌套页面自动居中代码，已在多个论坛测试，效果还行，大多数论坛应该可以通用，相 ...

谢谢老师分享优美草原歌曲，祝贺老师的居中代码测试成功

esewo 发表于 2026-2-27 06:43:16

感谢分享，观点独特新颖

yly 发表于 2026-3-1 22:39:01

支持分享，文章十分出众

Kangetsu 发表于 7 天前

支持佳作，风格独具一格

46tianbaobao 发表于 5 天前

感谢分享，引发深入探讨

luxianshi 发表于 5 天前

前来支持~~~~~~~~~~~~~~~~~~~

查看完整版本: 一组优美草原歌曲欣赏