樵歌 发表于 2022-12-10 07:44

TO大猫咪 阿诗玛

<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray url('https://img.zcool.cn/community/0196eb559a073b6ac72532642abdfc.jpg@2o.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
</style>
<div id="papa">
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=4877833.mp3" autoplay loop></audio>
<script>
(function() {
      (function(mkPlayer) {let defaults = {player_css: 'bottom: 10px; left: calc(50% - 50px);',playerCode: `<style>#mplayer { position: absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55); }#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }</style><svg id="mplayer" width="100" height="100"><g id="circle_wrap" transform="rotate(-90, 50, 50)" style="cursor: pointer;"><circle id="track" cx="50" cy="50" r="40" stroke-width="10" /><circle id="prog" cx="50" cy="50" r="40" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 40 40,40 60,60, 50 z"></path><path id="btnpause" d="M 42 40,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display: none;"></path><path d="M 47 50,50 40,50 60,47 60 z" fill="transparent" /></g></svg>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');};mkPlayer.HCPlayer = playCode;})(this);
      HCPlayer({});
})();
</script>


樵歌 发表于 2022-12-10 07:45

@大猫咪 快来听老歌，可是歌颂你第二故乡滴歌{:4_173:}

一窗清寒 发表于 2022-12-10 07:51

樵哥，早。来欣赏你的精美制作{:4_204:}

一窗清寒 发表于 2022-12-10 07:52

樵歌 发表于 2022-12-10 07:45
@大猫咪 快来听老歌，可是歌颂你第二故乡滴歌

第二故乡，是云南？猫的第一故乡在哪里？

红影 发表于 2022-12-10 07:58

好听，这个图图找得好，特别适合这首歌曲{:4_187:}

红影 发表于 2022-12-10 07:59

这首歌送猫猫也恰当。猫猫收礼开心{:4_187:}

小辣椒 发表于 2022-12-10 08:28

樵哥哥速度的，一下子二个了{:4_199:}

小辣椒 发表于 2022-12-10 08:29

送给猫猫的有个美女的背影，留个悬念，让猫猫多点遐想{:4_172:}

小辣椒 发表于 2022-12-10 08:32

樵哥哥确实喜欢老歌 而且都蛮好听的，可见我们发的歌樵哥哥不会喜欢的{:4_189:}

小辣椒 发表于 2022-12-10 08:32

猫猫收礼开心

梦油 发表于 2022-12-10 11:32

画面中出现一红衣人，可谓是点睛之笔，它使整幅画面熠熠生辉。樵歌朋友遴选的美图真好！

梦缘 发表于 2022-12-10 19:57

欣赏好听的老歌，感谢分享！{:4_204:}

闲言不语 发表于 2022-12-10 19:59

士别半日，刮目相看！{:4_204:}

闲言不语 发表于 2022-12-10 20:01

樵兄这代码越发顺溜了

辫子哥哥 发表于 2022-12-10 21:50

鼓励一下，代黑总批作业{:4_205:}

辫子哥哥 发表于 2022-12-10 21:51

100分

大猫咪 发表于 2022-12-12 13:15

樵歌 发表于 2022-12-10 07:45
@大猫咪 快来听老歌，可是歌颂你第二故乡滴歌

帖制作真漂亮！谢谢樵哥哥美帖！老开心了 {:5_151:}经典咏流传！{:5_106:}收藏啦！

顺祝樵哥哥一切安好！

{:4_191:}{:4_179:}{:4_199:}

大猫咪 发表于 2022-12-12 13:17

谢谢楼上兄弟姐妹 {:4_204:} 开心每一天！{:4_191:}

樵歌 发表于 2022-12-13 18:18

一窗清寒 发表于 2022-12-10 07:52
第二故乡，是云南？猫的第一故乡在哪里？

回妹子，在皇城根1L呢。我从10开始中新冠，发了三天烧，今天才好些，但嗓子疼，再两三天出院了。

樵歌 发表于 2022-12-13 18:26

大猫咪 发表于 2022-12-12 13:15
帖制作真漂亮！谢谢樵哥哥美帖！老开心了   经典咏流传！收藏啦！

顺祝樵哥哥一切 ...

我成羊了己甲天，前三天发热头昏脑胀，今天体温E常了，但嗓子疼。医生祝快好了{:4_199:}
页: [1]
查看完整版本: TO大猫咪 阿诗玛