烟雨云台

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

马黑黑 发表于 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:}

马黑黑 发表于 2026-8-6 08:48

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

感谢支持

马黑黑 发表于 2026-8-6 08:51

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

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

马黑黑 发表于 2026-8-6 08:51

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

上午好！

梦江南 发表于 2026-8-6 08:54

黑黑老师出作品也太快了，老学生要跟不上了。{:4_173:}

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

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

{:4_197:}

霜染枫丹 发表于 2026-8-6 10:47

马老师上午好~~

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

马黑黑 发表于 2026-8-6 12:35

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

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

果酱果酱

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

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

{:4_172:}

小辣椒 发表于 2026-8-6 20:41

这个移动圆切换背景效果非常漂亮{:4_187:}

小辣椒 发表于 2026-8-6 20:42

欣赏黑黑好制作{:4_178:}

马黑黑 发表于 2026-8-6 22:02

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

感谢领导支持

马黑黑 发表于 2026-8-6 22:02

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

{:4_190:}

马黑黑 发表于 2026-8-6 22:02

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

晚上嚎

红影发表于 2026-8-6 22:27

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

这样的制作真漂亮{:4_187:}

马黑黑 发表于 2026-8-7 12:18

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

湿湿水啦

页: [1] 2

花潮论坛's Archiver

烟雨云台