首页 › 播放器 › 一组经典船歌在线欣赏

了了子 发表于 2026-3-30 20:45

一组经典船歌在线欣赏

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

<!-- 外层容器：包裹 iframe，用于居中 -->
<div id="iframeContainer">
    <iframe src="https://www.llz123.net/llz/llz/mulu/xiaochuan/" frameborder="0" scrolling="no"></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 -= 10;

      
      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-30 20:48

一组船歌，与大家分享。这个海洋背景使用了两个swf动画（海浪），需要安装了swf播放器才能显示（不能显示也不影响播放器播放），swf尽管要淘汰，但一些很精致的动画还是可以用一用，视频或者动图无法替代。

liumang 发表于 2026-3-30 22:41

欣赏了了子老师又一个精彩制作，老师打开列表和专辑介绍是空的，没有内容，是故意没有写的？

liumang 发表于 2026-3-30 22:47

了了子老师的这个播放器背景我手机上去看看效果有没有SWF效果

liumang 发表于 2026-3-30 22:50

手机开始看不见SWF水波效果，刚想离开，水波出来了，，效果极佳

liumang 发表于 2026-3-30 22:51

手机离开，回来电脑浏览器水波效果也是出来了

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

liumang 发表于 2026-3-30 22:51

我电脑没有SWF软件的，也是可以看见，神了

liumang 发表于 2026-3-30 22:52

老师你这个水波是代码效果？

liumang 发表于 2026-3-30 22:54

反正，效果非常漂亮，很有特点的播放器制作，以前SWF制作都没有这么美，老师用代码完美呈现了，赞赞赞！！！

liumang 发表于 2026-3-30 22:54

感谢了了子老师的精美制作{:5_124:}

查看完整版本: 一组经典船歌在线欣赏