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

你是不是真的爱过我(演唱谈柒柒)

本帖最后由 了了子 于 2026-3-9 20:27 编辑 <br /><br /><style>
   
    #iframeContainer {
      width: 1360px;            
      margin: 120px 0;            
      transform: translateX(var(--offsetX, 0px));
   
      background: transparent;
      border: none;
    }
    iframe {
      width: 100%;
      height: 760px;
      border: none;
      display: block;         
    }
</style>


<div id="iframeContainer">
    <iframe src="https://www.llz123.net/llz/llz/mulu/ai/" frameborder="0" scrolling="no"    allowfullscreen></iframe>
</div>

<script>
(function() {

    function centerContainer() {
      var el = document.getElementById('iframeContainer');
      if (!el) return;

      
      if (el.offsetWidth === 0) {
            setTimeout(centerContainer, 50);
            return;
      }

      
      var curOffset = parseFloat(getComputedStyle(el).getPropertyValue('--offsetX')) || 0;

   
      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 -= -90;

      
      if (Math.abs(newOffset - curOffset) > 1) {
            el.style.setProperty('--offsetX', newOffset + 'px');
      }

      if (!window.__resizeObserver) {
            window.__resizeObserver = new ResizeObserver(function() {
                centerContainer();
            });
      }
      
      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>

红影 发表于 2026-3-9 21:45

歌词的展示方式十分奇特,从左边飘过来的彩色歌词,叠到了已经出现的歌词上。
变色标题字也漂亮,欣赏了了子好帖{:4_199:}

杨帆 发表于 2026-3-10 15:29

谢谢了了子老师精彩分享,欣赏学习了{:4_191:}

了了子 发表于 2026-3-18 21:01

红影 发表于 2026-3-9 21:45
歌词的展示方式十分奇特,从左边飘过来的彩色歌词,叠到了已经出现的歌词上。
变色标题字也漂亮,欣赏了了 ...

问好红影,谢谢欣赏,祝福开心快乐,春天般美丽!{:4_204:}

了了子 发表于 2026-3-18 21:02

杨帆 发表于 2026-3-10 15:29
谢谢了了子老师精彩分享,欣赏学习了

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

杨帆 发表于 2026-3-18 21:42

本帖最后由 杨帆 于 2026-3-19 06:14 编辑

了了子 发表于 2026-3-18 21:02
杨帆好,谢谢支持,祝福开心快乐,佳作多多!
老师好,在用您的居中代码发空间帖时,是不是原贴代码的宽高必须是确定的呢{:5_114:}

红影 发表于 2026-3-21 16:45

了了子 发表于 2026-3-18 21:01
问好红影,谢谢欣赏,祝福开心快乐,春天般美丽!

了了子的帖子都很惊艳,太赞了{:4_187:}
页: [1]
查看完整版本: 你是不是真的爱过我(演唱谈柒柒)