论坛 › 欢乐水吧 › 【感谢马黑黑老师】仰望（山鬼播放器移动作业）

雨中悄然 发表于 2023-1-28 16:17

【感谢马黑黑老师】仰望（山鬼播放器移动作业）

本帖最后由 雨中悄然 于 2023-1-30 13:18 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/63d752f4face21e9ef7e0642.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; z-index: 1; }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2786189.mp3" loop autoplay></audio>

<script >
(function() {
      (function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#mplayer {position: absolute;display: flex;align-items: center;gap: 6px;opacity: 0;transition: opacity .75s;--ww: 40px;--state: paused;--bg: black;--border: snow;}#btnplay {background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}#btnMsg { color: var(--border); background: var(--bg); border: 2px solid var(--border); border-radius: 8px; font: normal 15px sans-serif; padding: 3px; cursor: pointer; }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="mplayer"><span id="btnplay"></span><span id="btnMsg">全屏观赏</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);let timerId, fs = false;papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);mplayer.style.opacity = '.95';timerId = setTimeout('mplayer.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkPlayer.HCPlayer = playCode;})(this);
      HCPlayer({
                player_css: 'left: 900px; bottom: 10px; --ww: 40px; --bg: green; border: --snow;',
      });
})();

</script>

雨中悄然 发表于 2023-1-28 16:18

{:4_173:}一堂课一个知识点。先就这么着吧

庶民来了 发表于 2023-1-28 17:36

真的美，这样的学习太必要了。

雨中悄然 发表于 2023-1-28 17:51

庶民来了 发表于 2023-1-28 17:36
真的美，这样的学习太必要了。

感谢临贴{:4_190:}

红影 发表于 2023-1-28 18:00

悄然的做图好美，尤其字体，两个字各有半边被染色，好奇妙的构思{:4_199:}

红影 发表于 2023-1-28 18:01

@马黑黑收礼开心{:4_187:}

红影 发表于 2023-1-28 18:03

这个代码用的很好啊，全屏也很漂亮。亮起来，让黑黑看到好礼{:4_187:}

小辣椒 发表于 2023-1-28 18:09

欣赏悄然的精彩制作{:4_199:}

小辣椒 发表于 2023-1-28 18:09

黑黑收礼开心{:4_187:}

小辣椒 发表于 2023-1-28 18:09

黑黑收礼开心{:4_187:}

马黑黑 发表于 2023-1-28 18:13

感谢 悄然礼物{:4_187:}

马黑黑 发表于 2023-1-28 18:14

红影 发表于 2023-1-28 18:01
@马黑黑收礼开心

谢谢

马黑黑 发表于 2023-1-28 18:14

小辣椒 发表于 2023-1-28 18:09
黑黑收礼开心

谢谢，一同开心

海笑 发表于 2023-1-29 10:07

欣赏老师佳作！

小九 发表于 2023-1-29 11:42

很美的帖子{:4_187:}

雨中悄然 发表于 2023-1-29 14:28

红影 发表于 2023-1-28 18:00
悄然的做图好美，尤其字体，两个字各有半边被染色，好奇妙的构思

做图手还很生，需要学习。谢谢影宝鼓励{:4_173:}

雨中悄然 发表于 2023-1-29 14:29

红影 发表于 2023-1-28 18:01
@马黑黑收礼开心

新手上路。。忘了艾特。{:4_173:}好在有你

雨中悄然 发表于 2023-1-29 14:29

红影 发表于 2023-1-28 18:03
这个代码用的很好啊，全屏也很漂亮。亮起来，让黑黑看到好礼

{:4_183:}大抱一个

雨中悄然 发表于 2023-1-29 14:30

小辣椒 发表于 2023-1-28 18:09
欣赏悄然的精彩制作

感椒版鼓励{:4_204:}

雨中悄然 发表于 2023-1-29 14:32

马黑黑 发表于 2023-1-28 18:13
感谢 悄然礼物

翻了不少贴子，效果之前就解释很清楚了， 辛苦啦。应该的不客气{:4_173:}

查看完整版本: 【感谢马黑黑老师】仰望（山鬼播放器移动作业）