烟雨云台

马黑黑

马黑黑

帖子代码

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 gc = `原生lrc歌词`;
    
31. 
    
32.     var options = {
    
33.         pa: '.pa',
    
34.         urls: [['https://music.163.com/song/media/outer/url?id=2088974054', '烟雨云台']],
    
35.     };
    
36. 
    
37.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
38. 
    
39.     function tzRun() {
    
40.         var aud = new AudPlayer(options);
    
41.         const pics = document.querySelectorAll('.mpic img');
    
42.         pics.forEach(pic => {
    
43.             pic.title = '更换背景';
    
44.             pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
    
45.         });
    
46.     }
    
47. 
    
48.     function loadJs(url, callback) {
    
49.         var script = document.createElement('script');
    
50.         script.charset = 'utf-8';
    
51.         script.src = url;
    
52.         script.onload = function() {
    
53.             if (callback) callback();
    
54.         };
    
55.         document.head.appendChild(script);
    
56.     }
    
57. </script>

复制代码

玫瑰

精彩分享。

红影

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