情字难舍
本帖最后由 山里人 于 2023-2-1 14:32 编辑 <br /><br /> <style>#papa { margin: 0 250 0 calc(50% - 581px); width: 1000px; height: 600px; background: lightblue url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/tp/ynn.jpg'); box-shadow:
3px 3px 8px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#papa::after { content: ''; position: absolute; width: 1000; height: 550; opacity: .05; background: url('http://ln2018.oss-cn-hangzhou.aliyuncs.com/2022/htm/gif/xu.gif');left:
0px; top: -10px;}
</style>
<div id="papa"></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=224897010&.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [,],ttAr: ['同步','歌词','LRC','测试'],lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',player_css:
'bottom: 2px; left: calc(50% - 50px);', playerCode: `<style>#mplayer {--bg: linear-gradient(to right bottom,olive,black);position: absolute;width: 60px;height: 60px;display:
grid;place-items: center;animation: rot 6s infinite linear;cursor: pointer;color: snow;transform-style: preserve-3d;}.pedal {position: absolute;width: 99px;height:
30px;background: var(--bg);font: bold 0.9em sans-serif;display: grid;place-items: center;opacity: .95;}.pedal:nth-of-type(1) { transform: rotateY(45deg) translateZ(50px);
}.pedal:nth-of-type(2) { transform: rotateY(135deg) translateZ(50px); }.pedal:nth-of-type(3) { transform: rotateY(-135deg) translateZ(50px); }.pedal:nth-of-type(4) {
transform: rotateY(-45deg) translateZ(50px); }#btnMsg { position: absolute; color: snow; background: #999; opacity: 0; border: 2px solid snow; border-radius: 10px; padding:
8px; transition: all .65s; cursor: pointer; z-index:901; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.95),hsla
(100,100%,50%,.95)); position: absolute; font: bold 2.4em sans-serif; color: hsl(250, 100%, 98%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px
1px 2px hsla(0, 100%, 4%, .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 rot { to { transform: rotateY(-1turn); } }@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width:
100%; } }</style><div id="lrc" data-lrc="音乐在线">音乐在线</div><div id="mplayer"><span class="pedal"></span><span class="pedal"></span><span
class="pedal"></span><span class="pedal"></span></div><span id="btnMsg">全屏观赏</span>`,};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, fs = false,
tnow = Date.now(), timerId;;data.ttAr.forEach( (item,key) => {let spans = mplayer.children;spans.innerText =item;});mplayer.onclick = () => aud.paused ? aud.play() :
aud.pause();btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity =
'.15';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs =
true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () =>
mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'), mplayer.style.animationPlayState='paused')
: (lrc.style.setProperty('--state','running'), mplayer.style.animationPlayState='running');aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if
(aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});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);};};mkPlayer.HCPlayer = playCode;})(this);
//本行是插件代码
//下一行是lrc歌词数组
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '--bg: linear-gradient(hsla(0,100%,60%,.95),hsla(350,100%,50%,.99)); left: 250px; top: 520px;',
ttAr: ['播放','暂停','播放','暂停'],
player_css: '--bg: linear-gradient(to left top,#adfeff,#fff0); top: 540px; right: 100px; color: tan;',
});
})();
</script>
画面太美了，点赞。 看到版面有点变形了，帮您把最上面的一些零碎去掉，就好了{:4_173:} 制作很漂亮，给山里人点赞。{:4_187:}
排版上再左移一下就好了。这个宽度1000，用50%-581就好，用681就太大了？ 这么快做成了，非常赞。歌词同步也很准确{:4_187:} 欣赏山里人的精彩制作{:4_187:} 为什么点击全部观赏你出来会是4个小图？没有全屏大图{:4_203:} 不错 好看的图，好听的歌，欣赏问好！{:4_187:} 马黑黑 发表于 2023-1-31 17:23
不错
好听{:4_199:} 雨中悄然 发表于 2023-2-1 10:34
好听
确实如此 马黑黑 发表于 2023-2-1 10:35
确实如此
甚好 雨中悄然 发表于 2023-2-1 10:38
甚好
{:4_181:}
页:
[1]