这人准备放音乐，做瑜伽了
你可以参与了嘛。{:4_189:}
<style>
#papa { left: -214px; width: 1024px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/62c683f5f54cd3f937652f22.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; position: relative; }
.imgs { position: absolute; left: 10px; bottom: 10px; width: 160px; background: #eee; box-shadow: 2px 2px 20px rgba(0,0,0,.15); transition: .8s linear; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
.imgs:hover { box-shadow: 2px 2px20px #eee; cursor: pointer; }
</style>
<div id="papa">
<div id="playbox">
<p id="geci" style="font-size: 1.2em">Don't Make Me Wait for Love </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="https://www.joy127.com/url/91052.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let lrcAr = [
['7500.00','Dont Make Me Wait for Love '],
['12000.00','歌手：Kenny G / Lenny Williams'],
['17280.00','所属专辑：Duotones'],
['172801.00','Sitting here just staring at your picture<br>坐在这只是呆呆地望着你的照片'],
['123600.00','Waiting for your call<br>等着你的电话'],
['150300.00','So unclear Im hanging on a notion<br>情况是如此的不确定，而我还在坚持着'],
['178260.00','We could have it all<br>我们本来可以拥有所有的'],
['195780.00','Time and time again you tell me to be patient<br>一次又一次，你告诉我要有足够我耐心'],
['214920.00','But we cant let love slip away<br>但我们不能让爱溜走'],
['233040.00','Baby dont make me wait for love this time<br>宝贝，这次不要再让我为爱而等待了'],
['261960.00','oh darlin a love like this is hard to find<br>亲爱的，这样的真爱是很难邂逅的'],
['271200.00','Dont make me wait for love<br>不要让我为爱等待'],
['283800.00','Hmm I close the blinds and try to hide the darkness<br>我关掉窗户，试着把自己隐藏在黑暗中'],
['343380.00','Fall asleep alone<br>独自沉睡'],
['353820.00','Give me a sign a man aint supposed to face life<br>给我一个暗示，一个男人无法独自面对生活'],
['372480.00','Standing on his own<br>今晚过来拯救我吧'],
['380340.00','When youre near me I cant help but see forever'],
['385980.00','当你在我身边时我不禁看到我们爱情的永远'],
['405420.00','Come and rescue me tonight<br>今晚过来拯救我吧'],
['418740.00','Baby dont make me wait for love this time oh<br>宝贝，这次不要再让我为爱而等待了'],
['437280.00','Oh oh darlin a love like this is hard to find<br>亲爱的，这样的真爱是很难邂逅的'],
['451020.00','Dont make me wait for love<br>不要让我为爱等待'],
['464280.00','dont make me wait for love this time oh<br>这次不要让我为爱等待'],
['477480.00','a love like this is hard to find<br>这样的真爱是很难邂逅的']
];
let imgAr = [
'https://pic.imgdb.cn/item/62c6a1fcf54cd3f9379043f7.jpg',
'https://pic.imgdb.cn/item/62c6a175f54cd3f9378f9255.jpg',
'https://pic.imgdb.cn/item/62c6a0e5f54cd3f9378e9e55.jpg',
'https://pic.imgdb.cn/item/62c6a06df54cd3f9378dcb0e.jpg',
];
let flag, slip = 0;
imgAr.forEach((item,key) => {
let img = document.createElement('img');
img.className = 'imgs';
img.src= item;
img.style.left = key*20 +10 + 'px';
img.style.bottom = key*20 + 10 + 'px';
img.style.zIndex = key + 1;
papa.appendChild(img);
});
let imgs = document.querySelectorAll('.imgs');
imgs.forEach((item,key) => {
item.onclick = () => {
if(flag != undefined) imgs.style.transform = 'translate(0,0) scale(1)';
let x = 540 - key * 20;
let y = 270 - key * 20;
item.style.transform = 'translate(' + x + 'px, -' + y + 'px) scale(3)';
flag = key;
}
});
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>
加林森 发表于 2022-5-31 10:34
你可以参与了嘛。
我不去，那么高档的地方花费不起{:4_173:} 红影 发表于 2022-5-31 20:52
我不去，那么高档的地方花费不起
跟着光碟学习嘛。 加林森 发表于 2022-5-31 20:56
跟着光碟学习嘛。
跟着光碟的话，在家就可以，何必跑那里去{:4_173:} 红影 发表于 2022-6-1 08:48
跟着光碟的话，在家就可以，何必跑那里去
我就是这个意思啊，在家里自己练，效果是一样的。 加林森 发表于 2022-6-1 08:55
我就是这个意思啊，在家里自己练，效果是一样的。
你这话前后不一样，是你说让我过去，我才说在家是一样的，现在怎么变成是你说的了{:4_173:} 红影 发表于 2022-6-1 09:04
你这话前后不一样，是你说让我过去，我才说在家是一样的，现在怎么变成是你说的了
出不去是前提，在家练习是必然。对不对。 加林森 发表于 2022-6-1 09:06
出不去是前提，在家练习是必然。对不对。
我们已经解封了呢，不可能总关着呀{:4_173:} 对啊，可以出去玩了应该很开心吧。
页:
1
[2]