论坛 › 马黑黑教程专版 › 支持长标题的遥控器

马黑黑 发表于 2023-3-25 18:12

支持长标题的遥控器

<style>
#mplayer {
        width: 100px;
        height: 160px;
        color: lightblue;
        font-size: 14px;
        background: linear-gradient(to right bottom,black,tan);
        border-radius: 4px;
        box-shadow: 2px 2px 6px black;
        transition: .6s;
        position: absolute;
        pointer-events: none;
        --state: running;
}
#mplayer::before {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        left: calc(50% - 15px);
        bottom: 15px;
        border-radius: 50%;
        background: #333;
        pointer-events: auto;
        cursor: pointer;
        border: 2px solid lightblue;
        box-shadow: 0 0 10px white inset, 0 0 10px white;
        animation: flash .3s infinite alternate var(--state);
}
.wrap {
        position: absolute;
        background: #333;
        padding: 6px;
        top: 6px; right: 6px; bottom: 60px; left: 6px;
        overflow: hidden;
}
#tit {
        position: absolute;
        white-space: nowrap;
        animation: fly 6s linear infinite var(--state);
}
#ttmsg {
        position: absolute;
        top: 36px; right: 6px; bottom: 60px; left: 6px;
        background: #333;
        text-align: center;
        padding: 4px;
}
@keyframes fly { to { transform: translate(-150%); } }
@keyframes flash { to { box-shadow: 0 0 50px #333 inset, 0 0 10px white; } }
</style>

<div id="mplayer">
        <div class="wrap">
                <span id="tit">HCPlayer 花潮在线播放器</span>
                <span id="ttmsg">00:00<br>00:00</span>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865851473" autoplay loop></audio>

<script>
tit.style.right = -1*tit.offsetWidth + 'px';
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;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => ttmsg.innerHTML = toMin(aud.duration) + '<br>' + toMin(aud.currentTime));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

马黑黑 发表于 2023-3-25 18:12

@小辣椒

马黑黑 发表于 2023-3-25 18:13

代码
<style>
#mplayer {
        width: 100px;
        height: 160px;
        color: lightblue;
        font-size: 14px;
        background: linear-gradient(to right bottom,black,tan);
        border-radius: 4px;
        box-shadow: 2px 2px 6px black;
        transition: .6s;
        position: absolute;
        pointer-events: none;
        --state: running;
}
#mplayer::before {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        left: calc(50% - 15px);
        bottom: 15px;
        border-radius: 50%;
        background: #333;
        pointer-events: auto;
        cursor: pointer;
        border: 2px solid lightblue;
        box-shadow: 0 0 10px white inset, 0 0 10px white;
        animation: flash .3s infinite alternate var(--state);
}
.wrap {
        position: absolute;
        background: #333;
        padding: 6px;
        top: 6px; right: 6px; bottom: 60px; left: 6px;
        overflow: hidden;
}
#tit {
        position: absolute;
        white-space: nowrap;
        animation: fly 6s linear infinite var(--state);
}
#ttmsg {
        position: absolute;
        top: 36px; right: 6px; bottom: 60px; left: 6px;
        background: #333;
        text-align: center;
        padding: 4px;
}
@keyframes fly { to { transform: translate(-150%); } }
@keyframes flash { to { box-shadow: 0 0 50px #333 inset, 0 0 10px white; } }
</style>

<div id="mplayer">
        <div class="wrap">
                <span id="tit">HCPlayer 花潮在线播放器</span>
                <span id="ttmsg">00:00<br>00:00</span>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865851473" autoplay loop></audio>

<script>
tit.style.right = -1*tit.offsetWidth + 'px';
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;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => ttmsg.innerHTML = toMin(aud.duration) + '<br>' + toMin(aud.currentTime));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

亦是金 发表于 2023-3-25 18:36

黑黑老师辛苦了，谢谢你的代码！收藏了！{:4_191:}

马黑黑 发表于 2023-3-25 18:55

亦是金 发表于 2023-3-25 18:36
黑黑老师辛苦了，谢谢你的代码！收藏了！

感谢支持。晚上好

亚伦影音工作室 发表于 2023-3-25 19:02

很好，等有空再用!谢谢！

马黑黑 发表于 2023-3-25 19:57

亚伦影音工作室 发表于 2023-3-25 19:02
很好，等有空再用!谢谢！

这个是炭烧的{:4_170:}

千羽 发表于 2023-3-25 21:51

黑黑老师教程又花样翻新，辛苦了{:4_187:}

马黑黑 发表于 2023-3-25 21:57

千羽 发表于 2023-3-25 21:51
黑黑老师教程又花样翻新，辛苦了

{:4_190:}

樵歌 发表于 2023-3-26 08:11

有好礼物总想着学生，这个教授是个好专家。{:4_189:}

马黑黑 发表于 2023-3-26 08:16

樵歌 发表于 2023-3-26 08:11
有好礼物总想着学生，这个教授是个好专家。

{:4_191:}

红影 发表于 2023-3-26 10:19

这个带滚动播放信息的，这个好{:4_187:}

红影 发表于 2023-3-26 10:20

这个炭烧配色真漂亮{:4_199:}

马黑黑 发表于 2023-3-26 10:25

红影 发表于 2023-3-26 10:20
这个炭烧配色真漂亮

看着像是被火烤过

红影 发表于 2023-3-26 20:14

马黑黑 发表于 2023-3-26 10:25
看着像是被火烤过

带着金属的质感呢{:4_187:}

马黑黑 发表于 2023-3-26 20:40

红影 发表于 2023-3-26 20:14
带着金属的质感呢

那是 tan 颜色的功效

小辣椒 发表于 2023-3-27 13:03

马黑黑 发表于 2023-3-25 18:12
@小辣椒

来了~~黑黑就是厉害，发现秒做出来的，太强大了{:4_178:}

小辣椒 发表于 2023-3-27 13:06

这个滚动字效果出来，设计非常的漂亮，黑黑，无所不能

马黑黑 发表于 2023-3-27 13:09

小辣椒 发表于 2023-3-27 13:06
这个滚动字效果出来，设计非常的漂亮，黑黑，无所不能

中午好

马黑黑 发表于 2023-3-27 13:09

小辣椒 发表于 2023-3-27 13:03
来了~~黑黑就是厉害，发现秒做出来的，太强大了

{:4_190:}

查看完整版本: 支持长标题的遥控器