无风无雨无心，也无你（但好像有谁）

马黑黑 发表于 2022-6-30 12:37

山人发表于 2022-6-30 12:59

CSS：
<style>
.papa { margin: auto; width: 1024px; height: 640px; background: #eee url('https://638183.freep.cn/638183/t22/51/g1.jpg') no-repeat center / cover; box-shadow: 0px 4px 30px rgba(0,0,0,.85); border-radius: 6px; position: relative; }
.smallpic { display: flex; gap: 4px; padding: 10px; width: 90px; position: absolute; overflow: hidden; }
.smallpic:hover { width: fit-content; cursor: pointer; }
.smallpic img { width: 100px; height: 100px; border-radius: 50%; filter: brightness(100%) opacity(80%); }
.smallpic img:hover { filter: brightness(110%) opacity(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; bottom: 10px; left: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: tan; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes fadein { from { filter: brightness(80%); } to {filter: brightness(100%); } }
@keyframes fadeout { from { filter: brightness(100%); } to {filter: brightness(80%); } }
</style>

山人发表于 2022-6-30 12:59

HTML：
<div class="papa">
<div class="smallpic"></div>
<div class="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:0 | 0:0</span>
</p>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1920271471.mp3" autoplay="autoplay" loop="loop"></audio>

山人发表于 2022-6-30 13:00

JavaScript：
<script>
let papa = document.querySelector('.papa'),
spic = document.querySelector('.smallpic'),
slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let flag = 0, slip = 0;
let picar = [
'https://638183.freep.cn/638183/t22/51/g1.jpg',
'https://638183.freep.cn/638183/t22/51/g2.jpg',
'https://638183.freep.cn/638183/t22/51/g3.jpg',
'https://638183.freep.cn/638183/t22/51/g4.jpg',
'https://638183.freep.cn/638183/t22/51/g5.jpg',
'https://638183.freep.cn/638183/t22/51/g6.jpg',
'https://638183.freep.cn/638183/t22/51/g7.jpg'
];

let lrcAr = [
['0.00','无风无雨无心，也无你- 纯音乐'],
['50.00','作曲 : 野浪吉他社'],
['160.00','音乐使灵魂洁净']
];

for(url of picar) {
let pic = document.createElement('img');
pic.src = url;
pic.className = 'ss';
spic.appendChild(pic);
}

let ss = document.querySelectorAll('.ss');

ss.forEach((item,key) => {
item.onclick = () => {
papa.style.background = 'url(' + item.src + ') no-repeat center / cover';
flag == 0 ? (papa.style.animation = 'fadein .8s', flag = 1) : (papa.style.animation = 'fadeout .8s', flag = 0);
}
});

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-6-30 13:08

左上角圆形图片弹出原理解析：

利用装载图片的选择器 .smallpic 加以实现：固定宽度（90px）, css hover 事件令其宽度为 fit-content ，亦即其宽度自动适应内部元素总尺寸。图片为 100px 宽度，为何只设父盒子 90 px？原因是，.smallpic 选择器有 10px 的 padding 设定。

此外，.smallpic 选择器设定 display 为 flex 布局，除设置了 gap 值，其余使用默认设置，这是确保选择器展开时图片是横向排列的。

山人发表于 2022-6-30 13:14

鼠标移动到小图片时“点亮”效果的实现技法：

本帖采用 CSS hover 触发鼠标经过事件，使用两个滤镜营造动态效果，代码如下，

filter: brightness(110%) opacity(100%);

birghtness 值为 100% 时是原图亮度，超过这个值是增亮；opacity 为 100% 时是完全不透明（之前图片设置了些许透明度）。其实也可以简单用 opacity 简单制作效果：

opacity: 值;

单独使用 opacity，其值在 0 - 1 之间，0 完全透明，1完全不透明。

山人发表于 2022-6-30 13:16

点图处大图原理解析：

小图已经加载了原始图片，仅仅是缩小而已。故，当点击小图片，将其 src 的值传递给 .papa 选择器更换背景，如此简单。

这部分功能由JS完成。

红影发表于 2022-6-30 15:37

原来鼠标划过才能看出都有谁{:4_173:}

红影发表于 2022-6-30 15:38

黑黑把大小图切换玩出这么多种类，厉害{:4_187:}

小辣椒 发表于 2022-6-30 17:53

黑黑今天又变了花样了，今天的女都躲在上面了。{:4_170:}

小辣椒 发表于 2022-6-30 17:54

黑黑这个制作也是漂亮，每天都有变化的制作，黑黑你最棒！

小辣椒 发表于 2022-6-30 17:57

好像有美女{:4_170:}

小辣椒 发表于 2022-6-30 17:57

这个作业我休息天完成

马黑黑 发表于 2022-6-30 18:27

红影发表于 2022-6-30 15:37
原来鼠标划过才能看出都有谁

藏起来了。不过收回有些生硬，我已经解决了鼠标离开秒收回的问题，有空谈谈。

马黑黑 发表于 2022-6-30 18:29

小辣椒发表于 2022-6-30 17:57
这个作业我休息天完成

这个难度不大

马黑黑 发表于 2022-6-30 18:29

红影发表于 2022-6-30 15:38
黑黑把大小图切换玩出这么多种类，厉害

玩玩而已

绿叶清舟 发表于 2022-6-30 18:45

有山人{:4_189:}

马黑黑 发表于 2022-6-30 19:04

绿叶清舟发表于 2022-6-30 18:45
有山人

是吗

亚伦影音工作室 发表于 2022-6-30 19:29

马黑黑发表于 2022-6-30 18:29
玩玩而已

加上自动代码，自动切换效果更好！个人理解！

绿叶清舟 发表于 2022-6-30 20:10

马黑黑发表于 2022-6-30 19:04
是吗

不是吗{:4_189:}

页: [1] 2

花潮论坛's Archiver

无风无雨无心，也无你（但好像有谁）