四季花儿开（学习黑黑的黑白世界效果）
<style>
#papa { left: -252px; width: 1100px; top:120px;height: 614px; background: #ccc url('https://pic.imgdb.cn/item/62c447d15be16ec74a1549c5.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; position: relative; }
.imgs { position: absolute; right:10px; top: 10px; width: 167px;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: #0909F7; 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>
<div style="position: absolute; left:40px; top: 100px; width:620px; opacity: .95;z-index: 1">
<img alt="" src="https://pic.imgdb.cn/item/62a09aa50947543129666cf8.gif"/></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5272425.mp3" autoplay="autoplay" loop="loop"></audio>
</div><br><br><br><br><br><br>
<script>
let lrcAr = [
['0.00','四季花儿开 (湖南民歌)'],
['10.00','歌手：廖莎 / 叶茅'],
['60.00','所属专辑：中国纯美民间小调'],
['170.00','感谢欣赏']
];
let imgAr = [
'https://pic.imgdb.cn/item/62c4480b5be16ec74a159ae3.gif',
'https://pic.imgdb.cn/item/62c448245be16ec74a15bdff.gif',
'https://pic.imgdb.cn/item/62c448405be16ec74a15e708.gif',
'https://pic.imgdb.cn/item/62c4485c5be16ec74a161156.gif',
'https://pic.imgdb.cn/item/62c448745be16ec74a1634a0.gif',
];
let flag, slip = 0;
imgAr.forEach((item,key) => {
let img = document.createElement('img');
img.className = 'imgs';
img.src= item;
img.style.right = key*20 +10 + 'px';
img.style.top = 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 = 420 - key * 20;
let y = 320 - key * 20;
item.style.transform = 'translate(-' + x + 'px, ' + y + 'px) scale(3.2)';
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_173:} 也跟着学个黑黑的代码，感谢黑黑{:4_187:} 本队还在。红影制作漂亮！ 红影 发表于 2022-7-5 23:04
哈哈，用透明图图就把那些花儿都挤一起去了
鼠标移到花花时会有发光的虚框，还是能区分开来的 这个做的有创造性，赞。 开花配送花，师妹这个有创意。也可以用狗狗猫猫等来做哈。{:4_173:} 加林森 发表于 2022-7-5 23:09
本队还在。红影制作漂亮！
队长辛苦了，做完看看挺晚了，就直接关电脑下了{:4_173:} 马黑黑 发表于 2022-7-5 23:20
鼠标移到花花时会有发光的虚框，还是能区分开来的
对的，还好黑黑留了这个虚框，否则真的分不清了{:4_173:} 马黑黑 发表于 2022-7-5 23:21
这个做的有创造性，赞。
黑黑的这个代码用来听歌特别方便，因为有了可选性，比如这个帖子可以选个喜欢的花，然后听歌。那些美女的帖子，也可以选个顺眼的美女，然后静静听歌。
无论怎样，给观看者可选择的权利，这点特别好{:4_199:} 樵歌 发表于 2022-7-6 07:54
开花配送花，师妹这个有创意。也可以用狗狗猫猫等来做哈。
还是花儿好看，师兄听歌的时候，可以从中选个喜欢的花儿放帖子里了。{:4_173:} 马黑黑 发表于 2022-7-5 23:20
鼠标移到花花时会有发光的虚框，还是能区分开来的
以前都是做帖的人做成什么是什么，现在这个代码可以让观看的人参与进自己的喜好了。{:4_204:}
这里的花朵长宽比相差较多，把差得最多的两种修正了图片，其他的基本差不多了。 红影 发表于 2022-7-6 09:08
以前都是做帖的人做成什么是什么，现在这个代码可以让观看的人参与进自己的喜好了。
这是交互的开始 红影 发表于 2022-7-6 09:05
黑黑的这个代码用来听歌特别方便，因为有了可选性，比如这个帖子可以选个喜欢的花，然后听歌。那些美女的 ...
简单交互，性质大不同 红影 发表于 2022-7-6 09:02
对的，还好黑黑留了这个虚框，否则真的分不清了
当时是想在黑色背景下有个发光的互动，所以弄了个比较大的 box-shadow 红影 发表于 2022-7-6 09:01
队长辛苦了，做完看看挺晚了，就直接关电脑下了
挺好的。 马黑黑 发表于 2022-7-6 12:11
这是交互的开始
是的，带交互的帖子，感觉更友好些{:4_204:} 马黑黑 发表于 2022-7-6 12:12
当时是想在黑色背景下有个发光的互动，所以弄了个比较大的 box-shadow
也让小图有了更明显的区分{:4_173:} 红影 发表于 2022-7-6 09:06
还是花儿好看，师兄听歌的时候，可以从中选个喜欢的花儿放帖子里了。
嗯与唱的配上3，比弄个y美女好，有八杆子打不着{:4_189:}