醉美水芙蓉 发表于 2022-7-9 11:59

人生到底怎么活(DJ何鹏版)

<style>
#papa { left: -214px; width: 1024px; height: 600px; background: #ccc url('https://s1.ax1x.com/2022/07/09/jDgBi6.jpg') no-repeat center/cover; position: relative; }
.piece { position: absolute; left: 160px; bottom: 100px; width: 160px; height: 200px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom; transition: all 1s; }
.piece:hover { box-shadow: 2px 2px 34px #fff; cursor: pointer; }
#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: snow; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.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; }
</style>

<div id="papa">
        <div class="playbox">
                <p id="geci">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>
        <audio id="aud" src=" https://www.qqmc.com/up/kwlink.php?id=224561919&.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let flags = [...Array(6)].map((x,y) => y*0);
let zIdx = 0, slip = 0;
let picAr = [
        'https://s1.ax1x.com/2022/07/09/jDshgH.jpg',
        'https://s1.ax1x.com/2022/07/09/jDsWCD.jpg',
        'https://s1.ax1x.com/2022/07/09/jDscE6.jpg',
        'https://s1.ax1x.com/2022/07/09/jDsyHx.jpg',
        'https://s1.ax1x.com/2022/07/09/jDssD1.jpg',
        'https://s1.ax1x.com/2022/07/09/jDsruR.jpg ',
];
let lrcAr =[
        ['0.05','人生到底怎么活(DJ何鹏版) - 郭玲'],
        ['2.07','词：胡琳'],
        ['3.02','曲：何鹏'],
        ['3.06','OP：深圳市中讯通文化传播有限公司'],
        ['5.09','LRC编辑：醉美水芙蓉 '],
        ['22.08','人这一辈子 马拉一道辙'],
        ['27.07','说话是一口钉 诚信立美德'],
        ['32.09','贫穷不失志啊 富贵不忘根'],
        ['37.09','苦辣都是歌 何不潇洒过'],
        ['42.09','人活一辈子 要发光和热'],
        ['47.10','不做那糊涂虫 要当实力哥'],
        ['53.00','青春如焰火 自己要把握'],
        ['58.01','赶走忧和烦 岁月不蹉跎'],
        ['65.07','人生到底怎么活 问你也问我'],
        ['70.07','别怕自己会犯错 只要能改过'],
        ['75.08','健康快乐就足够 要求别太多'],
        ['80.08','只要自己心无愧 一切都值得'],
        ['88.05','人生到底怎么活 问你也问我'],
        ['93.05','就算红尘风和雨 勇敢的生活'],
        ['98.05','人在世间走一遭 满满是收获'],
        ['103.06','得到失去别在意 平安就喜乐'],
        ['133.09','人活一辈子 要发光和热'],
        ['138.10','不做那糊涂虫 要当实力哥'],
        ['144.00','青春如焰火 自己要把握'],
        ['149.00','赶走忧和烦 岁月不蹉跎'],
        ['156.07','人生到底怎么活 问你也问我'],
        ['161.07','别怕自己会犯错 只要能改过'],
        ['166.08','健康快乐就足够 要求别太多'],
        ['171.08','只要自己心无愧 一切都值得'],
        ['179.04','人生到底怎么活 问你也问我'],
        ['184.04','就算红尘风和雨 勇敢的生活'],
        ['189.04','人在世间走一遭 满满是收获'],
        ['194.05','得到失去别在意 平安就喜乐'],
        ['202.02','人生到底怎么活 问你也问我'],
        ['207.02','别怕自己会犯错 只要能改过'],
        ['212.02','健康快乐就足够 要求别太多'],
        ['217.03','只要自己心无愧 一切都值得'],
        ['224.09','人生到底怎么活 问你也问我'],
        ['229.09','就算红尘风和雨 勇敢的生活'],
        ['234.09','人在世间走一遭 满满是收获'],
        ['240.00','得到失去别在意 平安就喜乐'],
        ['248.03','谢谢欣赏！']
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length: 6}).forEach((item,key) => {
        item = document.createElement('img');
        item.className = 'piece';
        item.src = picAr;
        item.style.zIndex = key + 1;
        item.style.transform = 'rotate(' + (key*30-75) + 'deg)';
        papa.appendChild(item);
});

let img = document.querySelectorAll('.piece');

img.forEach((item,key) => {
        item.onclick = () => {
                flag = flags;
                if(flag == 0) {
                        item.style.zIndex = zIdx;
                        item.style.transform = 'translate(525px, 50px) scale(2.5)';
                        flags = 1;
                        zIdx ++;
                } else {
                        item.style.zIndex = key + 1;
                        item.style.transform = 'translate(0,0) rotate(' + (key*30-75) + 'deg)';
                        flags = 0;
                        zIdx --;
                }
        }
});

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 = (val) => {
        if(!val) return '0:0';
        val = Math.floor(val);
        return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script>


马黑黑 发表于 2022-7-9 12:15

委屈菇凉们了，都挤压的好苗条

大猫咪 发表于 2022-7-9 12:49

制作真漂亮！好听好看！真棒！

{:4_204:}{:4_199:}

加林森 发表于 2022-7-9 13:42

手机看不了。

小辣椒 发表于 2022-7-9 13:46

马黑黑 发表于 2022-7-9 12:15
委屈菇凉们了，都挤压的好苗条

哈哈~~

小辣椒 发表于 2022-7-9 13:48

欣赏水芙蓉的精彩制作，图图没有按等比例缩放

加林森 发表于 2022-7-9 13:49

现在手机又可以看见了？什么毛病？小姑娘都整成瘦子了，厉害了。

醉美水芙蓉 发表于 2022-7-9 15:47

马黑黑 发表于 2022-7-9 12:15
委屈菇凉们了，都挤压的好苗条

哈哈！不知道如何调整图片尺寸？

醉美水芙蓉 发表于 2022-7-9 15:48

小辣椒 发表于 2022-7-9 13:48
欣赏水芙蓉的精彩制作，图图没有按等比例缩放

谢谢小辣椒点评！不知道如何调整图片？

醉美水芙蓉 发表于 2022-7-9 15:48

加林森 发表于 2022-7-9 13:49
现在手机又可以看见了？什么毛病？小姑娘都整成瘦子了，厉害了。

谢谢队长精彩点评！

醉美水芙蓉 发表于 2022-7-9 15:49

大猫咪 发表于 2022-7-9 12:49
制作真漂亮！好听好看！真棒！

谢谢猫咪支持！

马黑黑 发表于 2022-7-9 16:38

醉美水芙蓉 发表于 2022-7-9 15:47
哈哈！不知道如何调整图片尺寸？

这个模板尺寸是固定的，CSS中这句，

.piece { position: absolute; left: 160px; bottom: 100px; width: 160px; height: 200px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom; transition: all 1s; }

这个可以调整图片的宽高，但调整后，JS的相应的东西也要跟着动。所以还是要求图片的宽高比例尽量符合 160* 200 的比例

马黑黑 发表于 2022-7-9 16:48

小辣椒 发表于 2022-7-9 13:46
哈哈~~

{:4_190:}

加林森 发表于 2022-7-9 16:49

醉美水芙蓉 发表于 2022-7-9 15:48
谢谢队长精彩点评！

现在我的电脑恢复了，看见你的美女都变形了呢？

醉美水芙蓉 发表于 2022-7-9 16:51

马黑黑 发表于 2022-7-9 16:38
这个模板尺寸是固定的，CSS中这句，

.piece { position: absolute; left: 160px; bottom: 100px; widt ...

谢谢黑黑老师耐心讲解!黑黑老师辛苦了！

马黑黑 发表于 2022-7-9 16:53

醉美水芙蓉 发表于 2022-7-9 16:51
谢谢黑黑老师耐心讲解!黑黑老师辛苦了！

主要是比例哈

红影 发表于 2022-7-10 07:54

漂亮，欣赏水芙蓉美女好帖{:4_187:}
页: [1]
查看完整版本: 人生到底怎么活(DJ何鹏版)