快乐很贵
本帖最后由 醉美水芙蓉 于 2022-7-5 20:15 编辑 <br /><br /> <style>#papa { left: -214px; width: 1024px; height: 800px; background: #ccc url('https://s1.ax1x.com/2022/06/19/XXgAXQ.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">LRC Loading ... </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.qqmc.com/up/kwlink.php?id=226100442&.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let lrcAr = [
['0.00','雪十郎 - 快乐很贵'],
['0.04','作词：王婷'],
['0.06','作曲：王超然'],
['0.07','编曲：南少东'],
['0.09','混音：苏洲'],
['1.00','和声：雪十郎'],
['1.02','录音：空宇录音棚'],
['1.04','统筹：丁健'],
['1.05','出品人：孟庆利'],
['1.07','LRC编辑：醉美水芙蓉'],
['3.01','长大以后我才知道'],
['5.06','快乐很累'],
['18.03','小时候总以为这世界很美'],
['23.03','我骑着竹马把小伙伴追'],
['28.03','青苔墙'],
['29.06','古井旁'],
['30.08','外婆舀着水'],
['33.03','风是甜的大大的云朵'],
['35.10','带着草莓味'],
['38.05','当星星满夜空'],
['40.10','真的很美'],
['43.05','我把提着灯笼的萤火虫追'],
['48.05','妈妈到处寻找喊我把家回'],
['53.06','全家人捧我在手心'],
['56.01','把我当宝贝'],
['58.07','长大以后我才知道'],
['61.02','快乐很累'],
['63.07','不敢偷懒'],
['64.09','不敢放纵我不配'],
['68.08','忙忙又碌碌呀'],
['71.03','碌碌又无为'],
['73.08','却没有太多的时间'],
['76.03','去把家人陪'],
['78.09','长大以后我才知道'],
['81.04','快乐很贵'],
['83.09','生活付出的代价是'],
['86.04','一滴滴的泪'],
['89.02','旧伤加新痕'],
['91.05','天天在憔悴'],
['94.00','只能独自在黑夜和寂寞干杯'],
['114.03','当星星满夜空'],
['116.07','真的很美'],
['119.03','我把提着灯笼的萤火虫追'],
['124.03','妈妈到处寻找喊我把家回'],
['129.04','全家人捧我在手心'],
['131.10','把我当宝贝'],
['134.05','长大以后我才知道'],
['136.10','快乐很累'],
['139.05','不敢偷懒'],
['140.07','不敢放纵我不配'],
['144.07','忙忙又碌碌呀'],
['147.01','碌碌又无为'],
['149.03','却没有太多的时间'],
['152.02','去把家人陪'],
['154.07','长大以后我才知道'],
['157.02','快乐很贵'],
['159.06','生活付出的代价是'],
['162.02','一滴滴的泪'],
['164.07','旧伤加新痕'],
['167.02','天天在憔悴'],
['169.08','只能独自在黑夜和寂寞干杯'],
['174.09','长大以后我才知道'],
['177.04','快乐很累'],
['179.09','不敢偷懒'],
['181.02','不敢放纵我不配'],
['185.00','忙忙又碌碌呀'],
['187.05','碌碌又无为'],
['190.00','却没有太多的时间'],
['192.05','去把家人陪'],
['195.01','长大以后我才知道'],
['197.06','快乐很贵'],
['200.01','生活付出的代价是'],
['202.07','一滴滴的泪'],
['205.01','旧伤加新痕'],
['207.07','天天在憔悴'],
['210.02','只能独自在黑夜和寂寞干杯'],
['215.03','和寂寞干杯'],
['220.06','谢谢欣赏！']
];
let imgAr =[
'https://s1.ax1x.com/2022/07/05/jNNUrn.jpg',
'https://s1.ax1x.com/2022/07/05/jNNYvj.jpg',
'https://s1.ax1x.com/2022/07/05/jNNJ2Q.jpg',
'https://s1.ax1x.com/2022/07/05/jNN8PS.jpg ',
'https://s1.ax1x.com/2022/07/05/jNN158.jpg',
'https://s1.ax1x.com/2022/07/05/jNNlUf.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>
芙蓉真快啊，漂亮的制作 这个速度也够快的，队长都跟不上了{:4_170:} 听歌看美女{:4_173:} 芙蓉这个很有特点，非常漂亮！{:5_116:} 绿叶清舟 发表于 2022-7-5 20:17
芙蓉真快啊，漂亮的制作
问候清舟美女晚上好！ 马黑黑 发表于 2022-7-5 20:25
这个速度也够快的，队长都跟不上了
问候黑黑老师晚上好！ 四海八荒 发表于 2022-7-5 20:27
听歌看美女
问候四海老师晚上好！ 东篱闲人 发表于 2022-7-5 20:28
芙蓉这个很有特点，非常漂亮！
东篱老师晚上好! 醉美水芙蓉 发表于 2022-7-5 20:43
问候黑黑老师晚上好！
晚上好 水芙蓉这个做的漂亮{:4_178:} 水芙蓉真棒，把黑黑这个最新代码做出来了。制作很漂亮{:4_187:} 挺好的。赞！ 这各学习速度也是绝了哈。{:4_199:} 醉美水芙蓉 发表于 2022-7-5 20:42
问候清舟美女晚上好！
芙蓉下午好 醉美水芙蓉 发表于 2022-7-5 20:42
问候清舟美女晚上好！
芙蓉下午好 小辣椒 发表于 2022-7-5 21:40
水芙蓉这个做的漂亮
谢谢小辣椒美女支持！ 红影 发表于 2022-7-5 21:54
水芙蓉真棒，把黑黑这个最新代码做出来了。制作很漂亮
谢谢红影美女支持！ 加林森 发表于 2022-7-5 23:55
挺好的。赞！
谢谢队长支持！ 樵歌 发表于 2022-7-6 07:48
这各学习速度也是绝了哈。
谢谢樵歌欣赏支持！
页:
[1]
2