尹昔眠 云雾山间
<style>.mama { position: relative; left: -302.5px; width: 1201px; height: 799px; background: tan url('/data/attachment/forum/202206/13/073523vsea8g3ezstwi3ak.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid { position: absolute; width: 1345px; height: 799px; object-fit: cover; opacity: .3; }
.lrcWrap { position: absolute; top: 10px; left: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
.playbtn:hover { background: red; }
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
.pausebtn:hover { border-color: transparent red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb96f484078.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>尹昔眠 - 云雾山间</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1949087277.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //误差修正
let lrcAr = [
['0.11','作词 : 路柯'],
['0.49','作曲 : 路柯'],
['2.14','编曲 : 贾韪/faceioi'],
['4.25','制作人 : 爱写歌的小田'],
['5.69','歌手：尹昔眠'],
['18.18','星月在凝结'],
['21.80','我心跳逐渐'],
['26.07','静悄悄离别'],
['29.75','是命中的劫'],
['34.18','对你的思念'],
['37.20','是你不懂的强烈'],
['42.19','你让我择路'],
['45.20','可是你就是归途'],
['49.21','我为你拨开云雾 让日浮出 永远温柔退步'],
['54.01','你却不能向前一步 让我碰触'],
['58.14','那山间的海风何时能醒悟'],
['65.19','我为你摘下星图 愿赌服输 但你胜之不武'],
['70.15','你知道爱我胜过 造七级浮屠'],
['74.16','别想太透彻 还不如糊涂'],
['78.19','还不如误入 歧途'],
['100.09','星月在凝结'],
['103.80','我心跳逐渐'],
['108.12','静悄悄离别'],
['111.77','是命中的劫'],
['116.14','对你的思念'],
['119.08','是你不懂的强烈'],
['124.02','你让我择路'],
['127.38','可是你就是归途'],
['131.21','我为你拨开云雾 让日浮出 永远温柔退步'],
['136.09','你却不能向前一步 让我碰触'],
['140.08','那山间的海风何时能醒悟'],
['147.20','我为你摘下星图 愿赌服输 但你胜之不武'],
['152.12','你知道爱我胜过 造七级浮屠'],
['156.08','别想太透彻 还不如糊涂'],
['160.19','还不如误入'],
['163.33','我为你拨开云雾 让日浮出 永远温柔退步'],
['168.16','你却不能向前一步 让我碰触'],
['172.25','那山间的海风何时能醒悟'],
['179.14','我为你摘下星图 愿赌服输 但你胜之不武'],
['184.08','你知道爱我胜过 造七级浮屠'],
['188.06','别想太透彻 还不如糊涂'],
['192.10','还不如误入 歧途']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
aud.paused ? btnstate(1) : btnstate(0);
</script>
老黑的制作真漂亮。好大的云雾涌出来了。大赞！{:4_199:} 又是视频结合图片的，好漂亮。黑黑的眼光真好，两者结合非常恰当。这样做出的效果太好了{:4_199:} 烟雾缭绕地宛如仙境。真漂亮。 再来欣赏！ 加林森 发表于 2022-6-13 08:06
老黑的制作真漂亮。好大的云雾涌出来了。大赞！
这是视频的效果 红影 发表于 2022-6-13 09:33
又是视频结合图片的，好漂亮。黑黑的眼光真好，两者结合非常恰当。这样做出的效果太好了
视频的重复效果不是很理想 梦油 发表于 2022-6-13 11:35
烟雾缭绕地宛如仙境。真漂亮。
谢谢点评 马黑黑 发表于 2022-6-13 12:08
这是视频的效果
这个我还不会呢。 加林森 发表于 2022-6-13 12:13
这个我还不会呢。
能读代码，分析一下就知道怎么做了 马黑黑 发表于 2022-6-13 12:14
能读代码，分析一下就知道怎么做了
这个可以的。就是不知道该怎么去做。 加林森 发表于 2022-6-13 12:16
这个可以的。就是不知道该怎么去做。
动手了就会 马黑黑 发表于 2022-6-13 12:16
动手了就会
我也去找些视频的来看看。 马黑黑 发表于 2022-6-13 12:09
谢谢点评
别客气 又是代码把雾涌出来的吧，越来越神了 马黑黑 发表于 2022-6-13 12:09
视频的重复效果不是很理想
嗯，其实你找10秒以下的那些比较好，重复的过程比较连贯。不过这个已经很不错了，刚开始涌出的云雾特别震撼{:4_187:} 醉美水芙蓉 发表于 2022-6-13 16:57
很漂亮！黑黑老师辛苦了！
{:4_190:} 红影 发表于 2022-6-13 16:49
嗯，其实你找10秒以下的那些比较好，重复的过程比较连贯。不过这个已经很不错了，刚开始涌出的云雾特别震 ...
开始的时候的确很好 樵歌 发表于 2022-6-13 16:08
又是代码把雾涌出来的吧，越来越神了
现实中，一切都由代码驱动