马黑黑 发表于 2026-8-5 20:25

烟雨云台

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/h810.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #player1 { position: absolute; top: 30px; width: 28%; height: 15%; overflow: hidden; }
    .mpic { position: absolute; left: 0; height: 100%; white-space: nowrap; animation: move 50s linear infinite var(--state); }
    .mpic img { height: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; opacity: 0.5; transition: 1s; cursor: pointer; }
    .mpic img:hover { opacity: 1; }
    @keyframes move { to { transform: translateX(-50%); } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
    <div id="player1">
      <div class="mpic">
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
      </div>
    </div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=2088974054', '烟雨云台']],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);
      const pics = document.querySelectorAll('.mpic img');
      pics.forEach(pic => {
            pic.title = '更换背景';
            pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
      });
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-8-5 20:25

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/h810.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #player1 { position: absolute; top: 30px; width: 28%; height: 15%; overflow: hidden; }
    .mpic { position: absolute; left: 0; height: 100%; white-space: nowrap; animation: move 50s linear infinite var(--state); }
    .mpic img { height: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; opacity: 0.5; transition: 1s; cursor: pointer; }
    .mpic img:hover { opacity: 1; }
    @keyframes move { to { transform: translateX(-50%); } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
    <div id="player1">
      <div class="mpic">
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
      </div>
    </div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=2088974054', '烟雨云台']],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);
      const pics = document.querySelectorAll('.mpic img');
      pics.forEach(pic => {
            pic.title = '更换背景';
            pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
      });
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

玫瑰 发表于 2026-8-5 20:30

精彩分享。

红影 发表于 2026-8-5 20:34

点击小图会切换大图背景，真奇妙的制作{:4_199:}

杨帆 发表于 2026-8-5 23:39

好，一键切换背景，谢谢马老师精彩示范{:4_190:}
页: [1]
查看完整版本: 烟雨云台