了了子 发表于 2026-5-20 19:53

520祝福—童丽版《花心》欣赏

<style>

    #iframeContainer {
      width: 1420px;            
      margin: 120px 0;            
      transform: translateX(var(--offsetX, 0px));

      background: transparent;
      border: none;
    }
    iframe {
      width: 100%;
      height: 800px;
      border: none;
      display: block;            
    }
</style>


<div id="iframeContainer">
    <iframe src="https://www.llz123.net/llz/llz/mulu/huaxin/" 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 -=0;


      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-5-20 20:03

本帖最后由 了了子 于 2026-5-20 20:26 编辑

一首童丽的《花心》与大家分享。这个帖子主要是测试视频转场效果，这里是通过时间线动画控制视频转换，尝试避免视频硬性转场带来的页面卡顿等问题。
心动花语，温馨祝福，祝天下有情人终成眷属！

liumang 发表于 2026-5-21 00:03

了了子老师的代码制作太强大了，今天520这个帖子太好了，祝福520快乐！

{:5_122:}{:5_122:}

liumang 发表于 2026-5-21 00:04

我手机刚才看了效果完美，老师的视频转换流畅

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

liumang 发表于 2026-5-21 00:05

这首花心 也是特别好听，@小辣椒   你做过的

liumang 发表于 2026-5-21 00:05

感谢了了子老师的分享{:5_124:}

小辣椒 发表于 2026-5-21 22:13

liumang 发表于 2026-5-21 00:05
这首花心 也是特别好听，@小辣椒   你做过的

来了，谢谢艾特，是的，这首花心我做过，记得送冬雨的

小辣椒 发表于 2026-5-21 22:53

老师这个视频转换自然流畅，非常的棒！

{:5_150:}{:5_150:}{:5_150:}

小辣椒 发表于 2026-5-21 22:54

其实我都看不出是视频，感觉是代码控制的效果，反正佩服极了
{:5_158:}{:5_158:}{:5_158:}

liumang 发表于 2026-5-22 12:31

小辣椒 发表于 2026-5-21 22:13
来了，谢谢艾特，是的，这首花心我做过，记得送冬雨的

好像这里没有发过的，记得是很久以前做的
页: [1]
查看完整版本: 520祝福—童丽版《花心》欣赏