了了子 发表于 2026-2-23 20:27

一组经典草原歌曲在线欣赏

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

了了子 发表于 2026-2-23 20:29

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

小辣椒 发表于 2026-2-23 22:53

了了子 发表于 2026-2-23 20:29
本人喜欢发空间帖，春节有点空闲，捣鼓了一个嵌套页面自动居中代码，已在多个论坛测试，效果还行，大多数论 ...

问好老师，这个制作真漂亮，背景转换流畅，歌声好听{:4_199:}

小辣椒 发表于 2026-2-23 22:56

感谢老师发现{:4_187:}

红影 发表于 2026-2-23 23:12

这个居中很完美。帖子制作也美，那么多好歌，切换歌曲时歌手头像也跟着切换呢。
欣赏了了子好帖{:4_199:}

杨帆 发表于 2026-2-25 20:23

了了子 发表于 2026-2-23 20:29
本人喜欢发空间帖，春节有点空闲，捣鼓了一个嵌套页面自动居中代码，已在多个论坛测试，效果还行，大多数论 ...

欣赏草原歌曲开心，期待了了子老师的嵌套页面自动居中代码早日问世{:4_190:}

了了子 发表于 2026-3-9 20:32

小辣椒 发表于 2026-2-23 22:53
问好老师，这个制作真漂亮，背景转换流畅，歌声好听

问好小辣椒，谢谢支持，祝福开心快乐，健康美丽！{:4_204:}

了了子 发表于 2026-3-9 20:33

红影 发表于 2026-2-23 23:12
这个居中很完美。帖子制作也美，那么多好歌，切换歌曲时歌手头像也跟着切换呢。
欣赏了了子好帖

问好红影，辛苦了，祝福开心快乐，健康美丽！{:4_204:}

了了子 发表于 2026-3-9 20:33

杨帆 发表于 2026-2-25 20:23
欣赏草原歌曲开心，期待了了子老师的嵌套页面自动居中代码早日问世

杨帆好，谢谢支持，祝福开心快乐，佳作多多！{:4_191:}

梦油 发表于 2026-3-9 20:58

听着真过瘾。谢谢了了子朋友。

红影 发表于 2026-3-11 10:51

了了子 发表于 2026-3-9 20:33
问好红影，辛苦了，祝福开心快乐，健康美丽！

应该是您辛苦，给大家带来了这么多好听的歌儿{:4_187:}
页: [1]
查看完整版本: 一组经典草原歌曲在线欣赏