论坛首页 › 播放器版 › 可折叠分屏视频播放器 —— 模拟华为手机二（三）折叠屏切换效果

llz123 发表于 昨天 17:17

可折叠分屏视频播放器 —— 模拟华为手机二（三）折叠屏切换效果

本帖最后由 llz123 于 2026-10-26 17:22 编辑 <br /><br /><style>

    #iframeContainer {
      width: 1500px;            
      margin: 120px 0;            
      transform: translateX(var(--offsetX, 0px));
      
      background: transparent;
      border: none;
    }
    iframe {
      width: 100%;
      height: 750px;
      border: none;
      display: block;            
    }
</style>


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

llz123 发表于 昨天 17:27

模拟华为手机二、三折分屏效果，点击折叠按钮屏幕折叠，点击展开分开，点击合并按钮合并Wie一个整屏大窗口。这是基础代码，与大家分享，制作成完整帖子，还可以添加背景，美化播放面板等，。

klxf 发表于 昨天 17:29

奇特，漂亮，顺畅，视听盛宴，谢谢llz123老师精彩分享

llz123 发表于 昨天 17:32

问好klx，你也在，谢谢欣赏！

klxf 发表于 昨天 17:49

llz123 发表于 2026-10-26 17:27
模拟华为手机二、三折分屏效果，点击折叠按钮屏幕折叠，点击展开分开，点击合并按钮合并Wie一个整屏大窗口 ...

厉害！如果能实现分屏不分内容（多屏拼接显示一个整体内容），体验感会更好些呢

llz123 发表于 昨天 17:53

klxf 发表于 2026-10-26 17:49
厉害！如果能实现分屏不分内容（多屏拼接显示一个整体内容），体验感会更好些呢 ...

版本三就是，有三个版本，右上角有切换按钮！文件分别是zhedie1.html   zhedie2.htmlzhedie3.html   可以依次打开看代码。

klxf 发表于 昨天 18:09

llz123 发表于 2026-10-26 17:53
版本三就是，有三个版本，右上角有切换按钮！文件分别是zhedie1.html   zhedie2.htmlzhedie3.html   可 ...

模拟逼真，构思精密，效果漂亮！

学习一下~谢谢llz123老师经典示范

醉美水芙蓉 发表于 昨天 21:03

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

查看完整版本: 可折叠分屏视频播放器 —— 模拟华为手机二（三）折叠屏切换效果