【三伏消暑】第二天 朵 《桃花朵朵开》
<style>#papa { left: -214px; display: grid; place-items: center; width: 1024px; height: 640px; background: #333 url('https://s1.ax1x.com/2022/07/22/jOgYND.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #7e6f52; overflow: hidden; box-shadow: 3px 3px 24px #000; position: relative; }
#son { width: 700px; box-shadow: inherit; box-shadow: 2px 2px 8px #000; }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div id="papa">
<img id="son" alt="" src="https://s1.ax1x.com/2022/07/22/jOgYND.jpg" />
<div id="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">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">00:00</span>
</p>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=4759429&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let idx = 0, picId = 0;
let lrcAr =[
['0.01','阿牛 - 桃花朵朵开 - DJ版'],
['0.08','作词：阿牛、友弟'],
['1.01','作曲：阿牛'],
['8.03','LRC编辑：醉美水芙蓉'],
['16.07','我在这儿等着你回来'],
['20.01','等着你回来'],
['21.05','看那桃花开'],
['23.08','我在这儿等着你回来'],
['27.05','等着你回来'],
['28.09','把那花儿采'],
['40.08','暖暖的春风迎面吹'],
['44.01','桃花朵朵开'],
['47.09','枝头鸟儿成双对'],
['51.06','情人心花儿开'],
['55.02','啊哟啊哟'],
['56.09','你比花还美妙'],
['59.01','叫我忘不了'],
['62.06','啊哟啊哟'],
['64.04','秋又去春又来'],
['66.05','记得我的爱'],
['72.02','我在这儿等着你回来'],
['75.06','等着你回来'],
['77.01','看那桃花开'],
['79.03','我在这儿'],
['81.02','等着你回来'],
['83.00','等着你回来'],
['84.05','把那花儿采'],
['86.10','我在这儿'],
['88.05','等着你回来'],
['90.05','等着你回来'],
['91.09','给你把花戴'],
['94.02','我在这儿'],
['95.09','等着你回来'],
['97.08','尝尝家乡菜'],
['99.02','团圆乐开怀'],
['132.04','暖暖的春风迎面吹'],
['135.08','桃花朵朵开'],
['139.05','枝头鸟儿成双对'],
['143.02','情人心花儿开'],
['147.01','啊哟啊哟'],
['148.06','你比花还美妙'],
['150.06','叫我忘不了'],
['154.03','啊哟啊哟'],
['155.09','秋又去春又来'],
['157.09','别把我忘怀'],
['163.07','我在这儿'],
['165.04','等着你回来'],
['167.03','等着你回来'],
['168.07','看那桃花开'],
['170.09','我在这儿'],
['172.08','等着你回来'],
['174.06','等着你回来'],
['176.03','把那花儿采'],
['178.03','我在这儿'],
['180.00','等着你回来'],
['181.10','等着你回来'],
['183.04','给你把花戴'],
['185.07','我在这儿'],
['187.05','等着你回来'],
['189.04','尝尝家乡菜'],
['190.08','团圆乐开怀'],
['193.01','我在这儿'],
['194.09','等着你回来'],
['196.08','等着你回来'],
['198.02','看那桃花开'],
['200.05','我在这儿'],
['202.03','等着你回来'],
['204.02','尝尝家乡菜'],
['205.06','团圆乐开怀'],
['210.03','谢谢欣赏！ ']
];
aniPlay();
setInterval(aniPlay, 4000);
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) geci.innerHTML = lrcAr;
}
});
let toMin = (val) => {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
function aniPlay() {
let picAr =[
'https://s1.ax1x.com/2022/07/22/jOgdgA.jpg',
'https://s1.ax1x.com/2022/07/22/jOga3d.jpg',
'https://s1.ax1x.com/2022/07/22/jOgU9H.jpg',
'https://s1.ax1x.com/2022/07/22/jOgt4e.jpg',
'https://s1.ax1x.com/2022/07/22/jOgJAO.jpg',
'https://s1.ax1x.com/2022/07/22/jOg8HK.jpg ',
'https://s1.ax1x.com/2022/07/22/jOg3B6.jpg',
'https://s1.ax1x.com/2022/07/22/jOg1nx.jpg'
];
let aniAr = [
[ { transform: 'translateX(-150%)' }, { transform: 'translateX(0)' } ],
[ { transform: 'translateX(0)' }, { transform: 'translateX(150%)' } ],
[ { transform: 'translateX(150%)' }, { transform: 'translateX(0)' } ],
[ { transform: 'translateY(0)' }, { transform: 'translateY(150%)' } ],
[ { transform: 'translateY(150%)' }, { transform: 'translateY(0)' } ],
[ { transform: 'translateY(0)' }, { transform: 'translateY(-150%)' } ],
[ { transform: 'translateY(-150%)' }, { transform: 'translateY(0)' } ],
[ { transform: 'translateX(0)' }, { transform: 'translateX(-150%)' } ]
];
son.animate(aniAr, { duration: 3000, iterations: 1, fill: 'forwards', delay: 0, easing: 'linear', },);
if(idx % 2 == 0) {
son.src = picAr;
picId ++;
if(picId > picAr.length - 1) picId = 0;
}
idx ++;
if(idx > aniAr.length - 1) idx = 0;
}
</script>
漂亮的补上{:4_204:} 第一张的小图是底图呢，也好看。欣赏水芙蓉好帖{:4_187:} {:4_199:}
补前面的，不错 樵歌 发表于 2022-7-23 21:40
漂亮的补上
谢谢樵歌欣赏支持！ 红影 发表于 2022-7-23 21:44
第一张的小图是底图呢，也好看。欣赏水芙蓉好帖
谢谢红影美女支持！ 小辣椒 发表于 2022-7-23 22:01
补前面的，不错
谢谢小辣椒美女支持！ 又见一个美才女呢。。。音乐好欢快。。图片也美。。。那个移动的图片，只有上半截，友友看看，修改下，会更惊艳呢。。 青青子衿 发表于 2022-7-23 22:53
又见一个美才女呢。。。音乐好欢快。。图片也美。。。那个移动的图片，只有上半截，友友看看，修改下，会更 ...
老师看得真仔细！谢谢老师点评！ 醉美水芙蓉 发表于 2022-7-23 22:19
谢谢樵歌欣赏支持！
欣赏必须补上哈{:4_189:}
页:
[1]