动感音乐欣赏TO：走过岁月（学习套用黑黑明日赞歌效果）
<style>#outBox { margin: 130px 0 0 calc(50% - 801px); width: 1440px; height: 797px; background: url('https://wj.zp68.com/lxx/yunhua/2022/05/28/0.gif') no-repeat center/cover; border: 1px solid gray; overflow: hidden; z-index: 1; position: relative; }
#innerBox { position: absolute; right: 30px;top: calc(50% - 150px); width: 250px; height: 250px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 100px rgba(0,0,128,.5), 0 0 36px rgba(0,0,128,.5); cursor: pointer; transition: 1s; }
#innerBox:hover { height: 350px; }
#dt2{ position: absolute; width:295px; height: 146px; top: 651px; left: 0px; }
</style>
<div id="outBox">
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/0.png" alt="" />
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.mp3" autoplay loop></audio>
<div id="innerBox" title="播放"></div>
</div>
<script>
(function() {
let ani, idx = 0;
const pics = new Array(14).fill(0).map((item, key) => 'https://wj.zp68.com/lxx/yunhua/2022/05/28/0' + (key + 1) + '.gif');
const showPic = () => {
innerBox.style.backgroundImage = `url(${pics})`;
var outwidth = outBox.offsetWidth, outheight = outBox.offsetHeight;
var inwidth = innerBox.offsetWidth, inheight = innerBox.offsetHeight;
var cx = (outwidth - inwidth - 150), cy = (outheight - inheight) / 2;
var fly = [
{right: `-${inwidth}px`, top: `${cy}px`},
{right: `${cx}px`, top: `${cy}px`, offset: 0.25},
{right: `${cx}px`, top: `${cy - 30}px`},
{right: `${cx}px`, top: `${cy + 30}px`},
{right: `${cx}px`, top: `${cy - 30}px`},
{right: `${cx}px`, top: `${cy}px`},
{right: `${cx}px`, top: `${cy}px`, offset: 0.95},
{right: `${outwidth}px`, top: `${cy}px`}
];
ani = innerBox.animate(fly, 10000);
ani.onfinish = () => {
idx = (idx + 1) % (pics.length);
showPic();
};
};
const mState = () => {
aud.paused ? ani.pause() : ani.play();
innerBox.title = ['暂停','播放'][+aud.paused];
};
aud.onplaying = aud.onpause = () => mState();
innerBox.onmouseover = () => {if(!aud.paused) ani.pause();};
innerBox.onmouseout = () => {if(!aud.paused) ani.play();};
innerBox.onclick = () => aud.paused ? aud.play() : aud.pause();
showPic();
})();
</script>
<br><br><br><br><br>
@走过岁月
感谢岁月一直以来的无私奉献，一切尽在不言中{:4_179:} @马黑黑
黑黑套用一个，测试了一下最多只能进去10个图片，少是可以的。
纯套用，感谢黑黑源码分享
我把播放器圆盖了250X250可能背景太黑的原因，这样鼠标点击拉长效果到350更加明显了
小辣椒 发表于 2024-6-13 20:57
@走过岁月
感谢岁月一直以来的无私奉献，一切尽在不言中
小辣椒留的沙发，舒服 小辣椒一下子放这么多效果出来，厉害 谢谢小辣椒，好开心，抱抱{:4_179:} 走过岁月 发表于 2024-6-13 21:07
小辣椒留的沙发，舒服
岁月来了，我们好久没有碰到了 走过岁月 发表于 2024-6-13 21:07
小辣椒一下子放这么多效果出来，厉害
岁月都是以前玩过的，你的动图至少有靠百个了，现在用了10小图，1大图 走过岁月 发表于 2024-6-13 21:09
谢谢小辣椒，好开心，抱抱
不客气，最应该谢的是你，小辣椒一直玩你的东西，前几天一下子链接没有，我都傻掉了{:4_198:} 小辣椒 发表于 2024-6-13 21:11
岁月来了，我们好久没有碰到了
来了，想你了 小辣椒 发表于 2024-6-13 21:13
岁月都是以前玩过的，你的动图至少有靠百个了，现在用了10小图，1大图
我都不知道做了多少个了 小辣椒 发表于 2024-6-13 21:14
不客气，最应该谢的是你，小辣椒一直玩你的东西，前几天一下子链接没有，我都傻掉了
呵呵，没事的现在好了 走过岁月 发表于 2024-6-13 21:16
来了，想你了
真的啊，{:4_170:}那就抱一个{:4_179:} 走过岁月 发表于 2024-6-13 21:17
我都不知道做了多少个了
反正我也是没有算过，但起码几百个视频了，我都做了这么多了 小辣椒 发表于 2024-6-13 21:17
真的啊，那就抱一个
是的，抱抱 {:4_179:} 走过岁月 发表于 2024-6-13 21:17
呵呵，没事的现在好了
现在我做过的效果统统出来了{:4_205:} 小辣椒 发表于 2024-6-13 21:19
反正我也是没有算过，但起码几百个视频了，我都做了这么多了
估计有 走过岁月 发表于 2024-6-13 21:19
是的，抱抱
好久不见了，确实想你的{:4_173:}
现在一切都好了，开始还不敢打扰你的，害怕影响你工作的，后来忍不住了。。。{:4_170:} 小辣椒 发表于 2024-6-13 21:22
好久不见了，确实想你的
现在一切都好了，开始还不敢打扰你的，害怕影响你工作的，后来忍不 ...
没事 小辣椒 发表于 2024-6-13 21:00
@马黑黑
黑黑套用一个，测试了一下最多只能进去10个图片，少是可以的。
JS代码这一句，
const pics = new Array(10).fill(0).map((item, key) => 'https://wj.zp68.com/lxx/yunhua/2022/05/28/0' + (key + 1) + '.gif');
红色部分是调整小图片数量的
页:
[1]
2