【学习黑黑老师播放器代码帖】 《春》回致：雨中悄然
<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://pic.imgdb.cn/item/641ff363a682492fcc79c419.jpg') center/cover no-repeat; box-shadow: 4px 8px 20px #000; position: relative; z-index: 1; }
#mplayer { left: 76%; bottom: 80px; transform: translate(-50%); width: fit-content; height: fit-content; color: tan; position: absolute; }
#mplayer::before, #mplayer::after { position: absolute; content: attr(data-cu); bottom: 36px; }
#mplayer::before { left: 10px; }
#mplayer::after { content: attr(data-du); right: 10px; }
#btn { display: block; margin: auto; margin-bottom: -5px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#prog { width: 400px; height: 5px; border: 1px solid tan; border-radius: 5px; display: grid; place-items: center start; position: relative; }
#prog::before, #prog::after { position: absolute; content: ''; cursor: pointer; }
#prog::before { width: var(--ww); height: 5px; border-radius: 5px; background: linear-gradient(to right, pink, green, pink); }
#prog::after { width: 100%; height: 30px; border: 0px solid red; }
.cap { position: absolute; left: calc(var(--ww) - 2px); width: 16px; height: 16px; background: pink; border-radius: 50%; }
.pic { position: absolute; left: 90%; top: 66%; width: 76px; border-radius: 50%; mix-blend-mode: multiply; filter: blur(1px) opacity(.6); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" alt="" />
<div id="mplayer" data-du="00:00" data-cu="00:00">
<img id="btn" src="https://638183.freep.cn/638183/t23/btn/meihua.png" alt="" />
<div id="prog"><span class="cap"></span></div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=236969" loop autoplay></audio>
<script>
(function() {
let canmove = false;
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
btn.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
aud.addEventListener('timeupdate', () => {if(!canmove) prog.style.setProperty('--ww', aud.currentTime * prog.offsetWidth / aud.duration + 'px');mplayer.dataset.cu = toMin(aud.currentTime);mplayer.dataset.du = toMin(aud.duration);});
prog.addEventListener('mousemove', (e) => {if (!canmove) return;let pos = e.offsetX;if (pos < 0) pos = 0;if (pos > prog.offsetWidth) pos = prog.offsetWidth;prog.style.setProperty('--ww', e.offsetX + 'px');});
prog.addEventListener('mousedown', (e) => canmove = true);
prog.addEventListener('mouseup', (e) => {canmove = false;aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;});
document.addEventListener('mouseup', () => canmove = false);
})();
</script> 本帖最后由 千羽 于 2023-3-26 17:08 编辑
@雨中悄然{:4_195:}
悄然，俺不会做代码图，只能勉强套用上黑黑老师的代码，心意却是满满的哦{:4_173:} 旋转的梅花，换上月季也是可以的{:4_170:} 千羽 发表于 2023-3-26 16:57
@雨中悄然
悄然，俺不会做代码图，只能勉强套用上黑黑老师的代码，心意却是满满的哦{:4_173: ...
太喜欢了，羽羽真的做了图给我。
我转走到我小站里了，好好收藏{:4_183:} 马黑黑 发表于 2023-3-26 17:27
旋转的梅花，换上月季也是可以的
才发现原来这个是春分节气的小花{:4_170:} 雨中悄然 发表于 2023-3-26 19:50
才发现原来这个是春分节气的小花
是的吧 这么美的春色，这么美的制作。羽儿好帖{:4_187:} 千羽 发表于 2023-3-26 16:57
@雨中悄然
悄然，俺不会做代码图，只能勉强套用上黑黑老师的代码，心意却是满满的哦{:4_173: ...
太谢谢千羽了，你的贴子有感染力，仿佛来到了春天，闲适的下午，安静的小憩。 千羽给人的感觉就是温暖与美好{:4_187:} 马黑黑 发表于 2023-3-26 19:51
是的吧
{:4_199:}好看 红影 发表于 2023-3-26 19:51
这么美的春色，这么美的制作。羽儿好帖
{:4_187:}太赞了 马黑黑 发表于 2023-3-26 17:27
旋转的梅花，换上月季也是可以的
那你换上月季的小动图吧{:4_173:} 雨中悄然 发表于 2023-3-26 19:46
太喜欢了，羽羽真的做了图给我。
我转走到我小站里了，好好收藏
悄然，来而无往非礼也。 只是图图挺简单的……你的小站在哪？{:4_185:} 雨中悄然 发表于 2023-3-26 19:50
才发现原来这个是春分节气的小花
这个桃花播放器是我喜欢的播放器之一{:4_173:} 红影 发表于 2023-3-26 19:51
这么美的春色，这么美的制作。羽儿好帖
谢谢影儿一如既往的鼓励和支持{:4_185:} 千羽 发表于 2023-3-26 20:09
悄然，来而无往非礼也。 只是图图挺简单的……你的小站在哪？
{:4_183:}千羽来了http://qhxy.52qingyin.cn/art/bshow.php?st=1&sd=1&art=1679831371 雨中悄然 发表于 2023-3-26 19:52
太谢谢千羽了，你的贴子有感染力，仿佛来到了春天，闲适的下午，安静的小憩。
这是用做过的图做的底图，，谢谢悄然鼓励了 千羽 发表于 2023-3-26 20:09
悄然，来而无往非礼也。 只是图图挺简单的……你的小站在哪？
你帮了我，还送我贴，真让我爱S你了{:4_187:} 千羽 发表于 2023-3-26 20:11
这个桃花播放器是我喜欢的播放器之一
我把它做成了点心{:4_170:} 雨中悄然 发表于 2023-3-26 19:53
千羽给人的感觉就是温暖与美好
是吗？高兴中……{:4_173:}