加林森 发表于 2022-6-14 17:45

《斯卡布罗集市》- 乔维怡 送给尊敬的黑黑欣赏！


<style>
.mama { position: relative; left: -302.5px; width: 1201px; height: 660px; background: tan url('https://pic.imgdb.cn/item/62a84c4d0947543129585548.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="http://www.kumeiwp.com/sub/filestores/2022/06/12/8368ef6e37492580ee3e1e6e178b7de6.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 = [
        ['1.07','斯卡布罗集市 - 乔维怡'],
        ['16.05','Are you going to Scarborough Fair'],
        ['24.26','Parsley sage rosemary and thyme'],
        ['30.72','Remember me to one who lives there'],
        ['40.03','He once was a true love of mine'],
        ['48.82','Tell him to make me a cambric shirt'],
        ['58.36','Parsley sage rosemary and thyme'],
        ['67.25','Without no seams nor needle work'],
        ['76.24','Then he\'ll be a true love of mine'],
        ['87.83','Tell him to find me on acre of land'],
        ['95.31','Parsley sage, rosemary and thyme'],
        ['103.82','Between the salt water and the sea strand'],
        ['112.99','Then he\'ll be a true love of mine'],
        ['121.45','Tell him to reap it with a sickle of leather'],
        ['159.96','Parsley sage rosemary and thyme'],
        ['176.59','And gather it all in a bunch of heather'],
        ['184.85','Then he\'ll be a true love of mine'],
        ['193.15','Are you going to Scarborough Fair'],
        ['202.00','Parsley sage rosemary and thyme'],
        ['211.28','Remember me to one who lives there'],
        ['221.02','He once was a true love of mine'],
      ['222.02','加林森特此感谢老黑的指导！']
];
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>

加林森 发表于 2022-6-14 17:45

本帖最后由 加林森 于 2022-6-14 17:47 编辑

@马黑黑
      {:4_171:}感谢老黑对大家的帮助与指导，我没有什么本事，就送此帖作为感谢吧！{:4_191:}

绿叶清舟 发表于 2022-6-14 17:57

真漂亮啊，队长太谦虚了

加林森 发表于 2022-6-14 18:04

绿叶清舟 发表于 2022-6-14 17:57
真漂亮啊，队长太谦虚了

谢谢清舟支持啊！{:4_176:}

马黑黑 发表于 2022-6-14 18:13

这歌我会唱。它是苏格兰民歌，我很小的时候我姑妈教过我。

加林森 发表于 2022-6-14 18:19

马黑黑 发表于 2022-6-14 18:13
这歌我会唱。它是苏格兰民歌，我很小的时候我姑妈教过我。

那就好。你喜欢我就放心了。{:4_191:}

马黑黑 发表于 2022-6-14 19:01

加林森 发表于 2022-6-14 18:19
那就好。你喜欢我就放心了。

说过不必老送我的，没必要的，开心就好

加林森 发表于 2022-6-14 19:06

马黑黑 发表于 2022-6-14 19:01
说过不必老送我的，没必要的，开心就好

这个是我第一次制作带一视频的作品，当然要送你的。

马黑黑 发表于 2022-6-14 19:10

加林森 发表于 2022-6-14 19:06
这个是我第一次制作带一视频的作品，当然要送你的。

用心了

加林森 发表于 2022-6-14 19:39

嗯嗯。

梦油 发表于 2022-6-14 20:15

欣赏佳作，问候老林。

醉美水芙蓉 发表于 2022-6-14 20:27

千羽 发表于 2022-6-14 20:59

图做的好看，音乐也是棒棒哒{:4_187:}

加林森 发表于 2022-6-14 21:00

梦油 发表于 2022-6-14 20:15
欣赏佳作，问候老林。

谢谢老梦。

加林森 发表于 2022-6-14 21:02

千羽 发表于 2022-6-14 20:59
图做的好看，音乐也是棒棒哒

千羽来啦。晚上好。有点炫幻的。{:4_189:}

千羽 发表于 2022-6-14 21:03

加林森 发表于 2022-6-14 21:02
千羽来啦。晚上好。有点炫幻的。

嗯，队长超高技艺，啥都会做{:4_187:}

加林森 发表于 2022-6-14 21:05

千羽 发表于 2022-6-14 21:03
嗯，队长超高技艺，啥都会做

这个是老黑教程里的。我就是跟着制作的。

千羽 发表于 2022-6-14 21:07

加林森 发表于 2022-6-14 21:05
这个是老黑教程里的。我就是跟着制作的。

嗯，巧手{:4_187:}

加林森 发表于 2022-6-14 21:15

千羽 发表于 2022-6-14 21:07
嗯，巧手

我今天制作了3个不同背景的图片。你去看看。一个送老黑，另外一个送红影，还有一个萨顶顶唱的。

千羽 发表于 2022-6-14 21:18

加林森 发表于 2022-6-14 21:15
我今天制作了3个不同背景的图片。你去看看。一个送老黑，另外一个送红影，还有一个萨顶顶唱的。

好的{:4_181:}
页: [1] 2
查看完整版本: 《斯卡布罗集市》- 乔维怡 送给尊敬的黑黑欣赏！