青石桥畔（致梦油）
<style>#papa { margin: 0 0 0 calc(50% - 596px); display: grid; place-items: center; width: 1024px; height: 640px; background: tan url('https://638183.freep.cn/638183/t22/webp/qqup.webp') no-repeat center/cover; box-shadow: 6px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
#papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t22/animal/bird3.gif'); left: 14%; top: 2%; filter: blur(.5px); }
#btnMsg { position: absolute; bottom: 25px; color: snow; background: black; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 1001; }
</style>
<div id="papa"> <span id="btnMsg">全屏观赏</span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=487879478.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 15px;',player_css: '',playerCode: `<style>#mplayer {position: absolute;left: left: calc(50% - 60px);bottom: 10px;--track: hsla(100,30%,80%,.65);--prog: hsla(100,60%,50%,.55);--color: #e9f1f6;}#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc {--motion: cover2;--tt: 1s;--state: running;--bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));position: absolute;font: bold 2.4em sans-serif;color: hsl(100, 100%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85));z-index: 900;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }</style><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none" /><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none" /><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, 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;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};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;};};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({
lrcAr: [],
player_css: 'left: 30px; bottom: 60px;',
lrc_css: 'left: 20px; bottom: 15px;',
});
//全屏
let fs = false, timerId;
mplayer.style.opacity = '0';
btnMsg.style.opacity = '0';
btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
papa.onmousemove = () => {
clearTimeout(timerId);
btnMsg.style.opacity = '.95';
mplayer.style.opacity = '.95'
timerId = setTimeout('btnMsg.style.opacity = "0"; mplayer.style.opacity = "0"',3000);
};
document.addEventListener("fullscreenchange", () => {
if(document.fullscreenElement !== null) {
fs = true;
btnMsg.innerText = '退出全屏';
} else {
fs = false;
btnMsg.innerText = '全屏观赏';
}
});
})();
</script>
本帖最后由 马黑黑 于 2022-12-22 07:53 编辑
全屏观赏帖子时，帖子处于真正的全屏状态，Windows桌面任务条不可见，若需要进行其他工作，可以：
方式一：退出全屏，方法有两种，① 按键盘左上角的Esc键，② 鼠标动一下，“退出全屏”按钮可见，点击它；
方式二：保持全屏，但想调出任务条上的活动程序（如已经打开的记事本）：按一下键盘左下角的Windows徽标键（Win键）或同时按下 Ctrl键+Esc键，然后从任务条点击需要调出的程序，或从开始菜单启动所需程序。
本帖播放器和“全屏观赏/关闭全屏”按钮在没有鼠标移动动作时，3秒后会自动隐藏，鼠标在帖子之上动一下，它们就会出现，然后也是3秒后隐藏。 DOM中的元素进入全屏的机制，必须由用户操作，浏览器保护这个策略，任何绕过用户操作的做法都徒劳，绝对不允许代理性质的操作。 沙发留给梦油，@梦油收礼开心{:4_187:} 红影 发表于 2022-12-22 08:34
沙发留给梦油，@梦油收礼开心
早呀！中队长还继续当吗 仔细看了看，好像底图放大，那个动图并不放大的。鼠标划过，播放器和全屏标识都出来了呢。 桥边的树是枫杨吧，特地去查了一下，原来《枫桥夜泊》里的枫也是指枫杨，以前一直以为是枫叶呢{:4_173:} 红影 发表于 2022-12-22 08:47
仔细看了看，好像底图放大，那个动图并不放大的。鼠标划过，播放器和全屏标识都出来了呢。
元素全屏，指一个元素，即帖子里请求全屏的那个，其它的元素原来咋样就咋样，没有平均分配，除非通过编程实现：全屏时，一一处理全部的子元素。 红影 发表于 2022-12-22 08:50
桥边的树是枫杨吧，特地去查了一下，原来《枫桥夜泊》里的枫也是指枫杨，以前一直以为是枫叶呢
嗯，枫杨，胡桃科的植物 本帖最后由 梦油 于 2022-12-22 13:56 编辑
谢谢黑黑先生的厚爱，这件十足珍贵的礼物带着朋友的情谊送到了俺的心里。我很喜欢这绿色为基调的作品，绿色象征着清新、平静、舒适、宁静和生机生机勃勃。同时绿色也被看作是一种和谐的颜色，绿色，可以营造一种平静安宁的氛围。祝我们的花潮生机勃勃、天天向上。祝黑黑先生快乐安康。 红影 发表于 2022-12-22 08:34
沙发留给梦油，@梦油收礼开心
谢谢影子朋友，谢谢黑黑朋友。谢谢你们的友情。 梦油 发表于 2022-12-22 09:22
谢谢黑黑先生的厚爱，这件十足珍贵的礼物带着朋友的友情送到了俺的心里。我很喜欢这绿色为基调的作品，绿色 ...
{:4_181:} 梦油 发表于 2022-12-22 09:24
谢谢影子朋友，谢谢黑黑朋友。谢谢你们的友情。
不客气不客气 马黑黑 发表于 2022-12-22 11:34
不客气不客气
谢谢你。 马黑黑 发表于 2022-12-22 08:43
早呀！中队长还继续当吗
是的，早上测一下还没卸任。 马黑黑 发表于 2022-12-22 08:54
元素全屏，指一个元素，即帖子里请求全屏的那个，其它的元素原来咋样就咋样，没有平均分配，除非通过编程 ...
嗯嗯，明白了{:4_187:} 梦油 发表于 2022-12-22 09:24
谢谢影子朋友，谢谢黑黑朋友。谢谢你们的友情。
不客气啊，梦油收礼开心{:4_187:} 红影 发表于 2022-12-22 08:34
沙发留给梦油，@梦油收礼开心
谢谢你给俺留着沙发。 红影 发表于 2022-12-22 14:08
不客气啊，梦油收礼开心
开心，开心，有人想到老朽，就是俺的最大快乐。 红影 发表于 2022-12-22 14:08
嗯嗯，明白了
其他元素的尺寸用百分比，或许可以解决伸缩后的尺寸比例问题。
页:
[1]
2