锄禾日当午（学习黑黑的图片转换）
<style>#papa { left: -414px; width: 1429px; height: 878px;; top: 150px;background: #ccc url('https://pic.imgdb.cn/item/62c95389f54cd3f937c9a2ae.gif') 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: 550px; top: 30px; 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://wj1.zp68.com:812/lxx/yunhua/2022/04/03/01.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let lrcAr = [
['0.00','锄禾日当午 - 小蓓蕾组合'],
['8.18','锄禾日当午 唉 哟'],
['12.57','汗滴禾下土 唉 哟'],
['16.51','谁知盘中餐 唉 哟'],
['20.52','粒粒皆辛苦 唉 哟'],
['24.44','锄禾日当午'],
['28.60','汗滴禾下土'],
['32.57','谁知盘中餐哟'],
['36.59','粒粒皆辛苦'],
['40.09','锄禾日当午 唉 哟'],
['44.20','汗滴禾下土 唉 哟'],
['48.20','谁知盘中餐 唉 哟'],
['52.31','粒粒皆辛苦 唉 哟'],
['56.13','粒粒皆辛苦'],
['60.22','LRC编辑：小辣椒'],
['68.53','锄禾日当午 唉 哟'],
['72.08','汗滴禾下土 唉 哟'],
['76.00','谁知盘中餐 唉 哟'],
['79.98','粒粒皆辛苦 唉 哟'],
['83.88','锄禾日当午'],
['88.00','汗滴禾下土'],
['92.06','谁知盘中餐哟'],
['95.86','粒粒皆辛苦'],
['99.76','锄禾日当午 唉 哟'],
['103.65','汗滴禾下土 唉 哟'],
['107.56','谁知盘中餐 唉 哟'],
['111.71','粒粒皆辛苦 唉 哟'],
['115.54','粒粒皆辛苦'],
['120.75','谢谢欣赏']
];
let imgAr = [
'https://pic.imgdb.cn/item/62c95238f54cd3f937c7d393.jpg ',
'https://pic.imgdb.cn/item/62c95283f54cd3f937c83e63.jpg',
'https://pic.imgdb.cn/item/62c952a0f54cd3f937c868ab.jpg',
'https://pic.imgdb.cn/item/62c952baf54cd3f937c889b9.jpg',
'https://pic.imgdb.cn/item/62c952d3f54cd3f937c8aaa6.jpg',
'https://pic.imgdb.cn/item/62c952e9f54cd3f937c8c9aa.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 = 640 - 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>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑作业有点迟 拖拉机了，没有好的素材，我那美女图图收藏特别少，就直接捣鼓自己的了 这个好可爱啊，这么童趣素材。亲爱的制作真漂亮{:4_199:} 红影 发表于 2022-7-10 10:47
这个好可爱啊，这么童趣素材。亲爱的制作真漂亮
亲爱的~~~没有好的素材，做图又太累，自己就地取材了{:4_170:} 这个好，欣赏 马黑黑 发表于 2022-7-10 11:03
这个好，欣赏
这个也是偷懒没有做图，直接自己的捣鼓了 小辣椒朋友早晨好！这个作品与众不同，很有新意。你真棒！ 梦油 发表于 2022-7-10 11:25
小辣椒朋友早晨好！这个作品与众不同，很有新意。你真棒！
谢谢梦油夸奖{:4_187:} 哈哈 辣椒来了，中午好！ 制作的真好看， PP很可爱{:5_106:} 赞！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-7-10 11:28
哈哈 辣椒来了，中午好！ 制作的真好看， PP很可爱 赞！
猫猫好，我是拖拉机了，别人早做玩了，我才交作业 小辣椒 发表于 2022-7-10 11:33
猫猫好，我是拖拉机了，别人早做玩了，我才交作业
嗯 不急的，调养好身体 ，慢慢学习开心就好！{:4_187:}{:4_179:} 大猫咪 发表于 2022-7-10 11:36
嗯 不急的，调养好身体 ，慢慢学习开心就好！
现在确实没有多的时间学习，反正抽空上来看看，学习学习。 小辣椒 发表于 2022-7-10 11:38
现在确实没有多的时间学习，反正抽空上来看看，学习学习。
嗯嗯 {:4_179:}{:4_190:} 小辣椒 发表于 2022-7-10 11:19
这个也是偷懒没有做图，直接自己的捣鼓了
不错的，恰到好处 马黑黑 发表于 2022-7-10 11:48
不错的，恰到好处
美女图图我收藏太少，都上美女而且感觉画面效果会差不多，佩服老头的PS技术 小辣椒 发表于 2022-7-10 10:44
拖拉机了，没有好的素材，我那美女图图收藏特别少，就直接捣鼓自己的了
这是小辣椒的照片！ 小辣椒 发表于 2022-7-10 11:54
美女图图我收藏太少，都上美女而且感觉画面效果会差不多，佩服老头的PS技术
都挺好 小辣椒 发表于 2022-7-10 11:54
美女图图我收藏太少，都上美女而且感觉画面效果会差不多，佩服老头的PS技术
老头是脑外科主任 小辣椒 发表于 2022-7-10 11:27
谢谢梦油夸奖
小辣椒朋友真是一位天才啊！