云水谣 - 阿鲁阿卓 - 欢乐水吧 - 花潮论坛

醉美水芙蓉 发表于 2022-8-25 22:08

云水谣 - 阿鲁阿卓

本帖最后由醉美水芙蓉于 2022-8-25 22:07 编辑 <br /><br /> <style>
.papa { left:-214px; padding: 10px;display: flex;width: 1024px;height: fit-content; background: #ccc url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/657cfb6f72d2834fa31113c80363dfb7.mp4.jpg') no-repeat center / cover; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 10px; right: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: lightseagreen; 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; }
.leftbox { width: 120px; }
.leftbox img { width: 100px; height: 100px; border-radius: 50%; opacity: .35; }
.leftbox img:hover { box-shadow: 0 4px 20px #000; opacity: 1; cursor: pointer; }
@keyframes show1 { to { opacity: .35; } }
@keyframes show2 { to { opacity: .45; } }
</style>

<div class="papa">
   <div class="leftbox">
            <img class="ss" src="https://pic.imgdb.cn/item/6307796d16f2c2beb1620c7e.jpg" alt="" />
            <img class="ss" src="https://pic.imgdb.cn/item/6307791116f2c2beb161df95.jpg" alt="" />
            <img class="ss" src="https://pic.imgdb.cn/item/6307791116f2c2beb161df8a.jpg " alt="" />
            <img class="ss" src="https://pic.imgdb.cn/item/6307791116f2c2beb161df82.jpg " alt="" />
            <img class="ss" src="https://pic.imgdb.cn/item/6307791116f2c2beb161df7c.jpg " alt="" />
            <img class="ss" src="https://pic.imgdb.cn/item/6307791116f2c2beb161df78.jpg " alt="" />
   </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://www.qqmc.com/up/kwlink.php?id=71584634&.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let papa = document.querySelector('.papa'),
   ss = document.querySelectorAll('.ss'),
   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 lrcAr = [
['0.00','云水谣 - 阿鲁阿卓'],
['10.06','词：漠沙/张晋夫'],
['21.03','曲：王黎光'],
['25.03','LRC编辑：醉美水芙蓉'],
['31.10','清清月光美悠悠密云水'],
['38.05','花溪伴着彩云追渔鼓夕阳醉'],
['45.02','叠翠雾灵山甜甜云蒙水'],
['51.08','青山绿水让人醉山川有智慧'],
['63.04','云啊悠悠的云'],
['70.03','水啊溜溜的水溜溜的水'],
['76.09','云啊悠悠的云'],
['83.09','水啊溜溜的水溜溜的水'],
['92.02','密山云水'],
['100.04','润得天地美润得天地美'],
['125.02','仁者爱青山智者爱碧水'],
['131.08','挥手携来天湖美游人不想回'],
['138.05','饮水要思源密云情相随'],
['145.03','司马长城踏歌飞人人有智慧'],
['156.07','云啊悠悠的云'],
['163.09','水啊溜溜的水溜溜的水'],
['177.03','水啊溜溜的水溜溜的水'],
['185.06','密山云水'],
['191.00','云啊悠悠的云'],
['193.06','润得天地美润得天地美'],
['201.09','云啊悠悠的云'],
['208.10','水啊溜溜的水溜溜的水'],
['215.03','云啊悠悠的云'],
['222.02','水啊溜溜的水溜溜的水'],
['230.05','密山云水'],
['238.07','润得天地美润得天地美'],
['246.03','谢谢欣赏！']
];

ss.forEach((ele) => {
   ele.onclick = () => {
            flag == 0 ? (ani = 'show1', flag = 1) : (ani = 'show2', flag = 0);
            papa.style.background = 'url(' + ele.src + ') no-repeat center / cover';
            papa.style.animation = ani + ' linear .8s';
   }
});

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-8-25 22:21

风景秀丽，帖子漂亮

马黑黑 发表于 2022-8-25 22:21

歌动听，水凉快

醉美水芙蓉 发表于 2022-8-25 22:22

马黑黑发表于 2022-8-25 22:21
风景秀丽，帖子漂亮

是黑黑老师的代码漂亮！

红影发表于 2022-8-25 22:23

漂亮的大小图切换和歌词同步制作，水芙蓉美女真棒{:4_187:}

马黑黑 发表于 2022-8-25 22:24

醉美水芙蓉发表于 2022-8-25 22:22
是黑黑老师的代码漂亮！

代码哪有漂亮的说法，是美丽{:4_170:}

醉美水芙蓉 发表于 2022-8-26 06:44

红影发表于 2022-8-25 22:23
漂亮的大小图切换和歌词同步制作，水芙蓉美女真棒

谢谢红影美女支持！

加林森 发表于 2022-8-26 08:51

制作真漂亮。很成功！赞！{:4_199:}

醉美水芙蓉 发表于 2022-8-26 11:42

加林森发表于 2022-8-26 08:51
制作真漂亮。很成功！赞！

感谢队长大力支持！

加林森 发表于 2022-8-26 12:13

醉美水芙蓉发表于 2022-8-26 11:42
感谢队长大力支持！

应该的。你也辛苦了！{:4_190:}

小辣椒 发表于 2022-8-26 15:25

欣赏水芙蓉精彩制作{:4_199:}

青青子衿 发表于 2022-8-26 17:29

芙蓉美才女，美制作，欣赏！{:4_204:}

醉美水芙蓉 发表于 2022-8-26 17:41

小辣椒发表于 2022-8-26 15:25
欣赏水芙蓉精彩制作

谢谢小辣椒美女支持！

醉美水芙蓉 发表于 2022-8-26 17:41

青青子衿发表于 2022-8-26 17:29
芙蓉美才女，美制作，欣赏！

谢谢朋友支持！

红影发表于 2022-8-26 19:45

醉美水芙蓉发表于 2022-8-26 06:44
谢谢红影美女支持！

客气了，欣赏水芙蓉美女的精美制作{:4_187:}

页: [1]

花潮论坛's Archiver

云水谣 - 阿鲁阿卓