烟雨云台

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/h810.jpg') no-repeat center/cover; color: lightgreen; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #player1 { position: absolute; top: 30px; width: 28%; height: 15%; overflow: hidden; }
   
7.     .mpic { position: absolute; left: 0; height: 100%; white-space: nowrap; animation: move 50s linear infinite var(--state); }
   
8.     .mpic img { height: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; opacity: 0.5; transition: 1s; cursor: pointer; }
   
9.     .mpic img:hover { opacity: 1; }
   
10.     @keyframes move { to { transform: translateX(-50%); } }
    
11. </style>
    
12. 
    
13. <div id="pa" class="pa">
    
14.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
    
15.     <div id="player1">
    
16.         <div class="mpic">
    
17.             <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
    
18.             <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
    
19.             <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
    
20.             <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
    
21.             <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
    
22.             <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
    
23.             <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
    
24.             <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
    
25.         </div>
    
26.     </div>
    
27. </div>
    
28. 
    
29. <script>
    
30.     var options = {
    
31.         pa: '.pa',
    
32.         urls: [['https://music.163.com/song/media/outer/url?id=2088974054', '烟雨云台']],
    
33.     };
    
34. 
    
35.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
36. 
    
37.     function tzRun() {
    
38.         var aud = new AudPlayer(options);
    
39.         const pics = document.querySelectorAll('.mpic img');
    
40.         pics.forEach(pic => {
    
41.             pic.title = '更换背景';
    
42.             pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
    
43.         });
    
44.     }
    
45. 
    
46.     function loadJs(url, callback) {
    
47.         var script = document.createElement('script');
    
48.         script.charset = 'utf-8';
    
49.         script.src = url;
    
50.         script.onload = function() {
    
51.             if (callback) callback();
    
52.         };
    
53.         document.head.appendChild(script);
    
54.     }
    
55. </script>

复制代码

玫瑰

精彩分享。

红影

点击小图会切换大图背景，真奇妙的制作

杨帆

好，一键切换背景，谢谢马老师精彩示范

马黑黑

杨帆 发表于 2026-8-5 23:39
好，一键切换背景，谢谢马老师精彩示范

感谢支持

马黑黑

红影 发表于 2026-8-5 20:34
点击小图会切换大图背景，真奇妙的制作

核心代码在 42 行，图片点击事件：设置 pa 容器的 background-image 属性（JS 写成 backgroundImage），使用 CSS 的 url() 函数、使用图片的 src（即图片地址）。

马黑黑

玫瑰 发表于 2026-8-5 20:30
精彩分享。

上午好！

梦江南

黑黑老师出作品也太快了，老学生要跟不上了。

马黑黑

梦江南 发表于 2026-8-6 08:54
黑黑老师出作品也太快了，老学生要跟不上了。

霜染枫丹

马老师上午好~~

有技术不等于有巧妙的构思，这个太棒了，很理想的表达形式！！同样可以用于很多用途，上面的小图就是按钮，弹出来的可以相关联，您的风光图只是一个演示，可以说只是依靠浏览器的功能，就能实现展示，说明，连吐槽都可以的功能！100%的佩服，点赞~~
感谢马老师的分享，先抱走，后制作，您辛苦了，祝安好~~

马黑黑

霜染枫丹 发表于 2026-8-6 10:47
马老师上午好~~

有技术不等于有巧妙的构思，这个太棒了，很理想的表达形式！！同样可以用于很多用途，上 ...

果酱果酱

梦江南

马黑黑 发表于 2026-8-6 09:04

小辣椒

这个移动圆切换背景效果非常漂亮

小辣椒

欣赏黑黑好制作

马黑黑

小辣椒 发表于 2026-8-6 20:42
欣赏黑黑好制作

感谢领导支持

马黑黑

小辣椒 发表于 2026-8-6 20:41
这个移动圆切换背景效果非常漂亮

马黑黑

梦江南 发表于 2026-8-6 13:52

晚上嚎

红影

马黑黑 发表于 2026-8-6 08:51
核心代码在 42 行，图片点击事件：设置 pa 容器的 background-image 属性（JS 写成 backgroundImage）， ...

这样的制作真漂亮

马黑黑

红影 发表于 2026-8-6 22:27
这样的制作真漂亮

湿湿水啦