论坛 › 欢乐水吧 › 来个舞曲跟红影学学

醉美水芙蓉 发表于 2022-10-10 21:45

来个舞曲跟红影学学

本帖最后由 醉美水芙蓉 于 2022-10-10 21:47 编辑 <br /><br /><style type="text/css">
.mama { left: -214px; width: 1024px; height: 560px; background: #eee; overflow: hidden; box-shadow: 0 4px 30px #000; position: relative; }
.player { position: absolute; bottom: 10px; right: 10px; padding: 12px; cursor: pointer; }
.vid { position: absolute; top: -55px; width: 1024px; height: 615px; object-fit: cover; }
#lrcMsg { font: bold 1.5em / 2em sans-serif; display: block; color: #eee; text-shadow: 1px 1px 2px #000; animation: fade 1s infinite; }
#meter { width: 100px; cursor: pointer; }
@keyframes fade { to { opacity: .6; } }
</style>

<div class="mama">
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6e0bce145.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        <div class="player">
                <span id="lrcMsg"> > Loading ...</span>
                <meter id="meter" min="0" max="100" low="33" high="66" optimum = "70" value="0"></meter>
        </div>
<div style="position: absolute; left:10px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
       <div style="position: absolute; left:360px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
       <div style="position: absolute; left:710px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
      <div style="position: absolute; right:-10px; top: 0px; width:480px;opacity: .95;">
                <img alt="" src="https://pic.imgdb.cn/item/62c7cc37f54cd3f937cff9f6.gif"/></div>
<div style="position: absolute; left:10px; top: 0px; width:480px;opacity: .95;">
                <img alt="" src="https://pic.imgdb.cn/item/62c7cc37f54cd3f937cff9f6.gif"/></div>


<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=51385754&.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
let lrcMsg = document.querySelector('#lrcMsg'),
        player = document.querySelector('.player');
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let slip = 0.3, lrcKey = 0;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.addEventListener('timeupdate',() => playMsg());
aud.addEventListener('ended',() => lrcKey = 0);
aud.addEventListener('playing',() => lrcMsg.style.animationPlayState = 'paused');
player.onclick = () => aud.paused ? (aud.play(), lrcMsg.style.animationPlayState = 'paused') : (aud.pause(), lrcMsg.style.animationPlayState = 'running');
let playMsg = () => {
        let ct = aud.currentTime, du = aud.duration, prog;
        lrcMsg.innerHTML = lrcAr;
        for(k = 0; k<lrcAr.length; k ++) {
                if(ct >= lrcAr - slip) {
                        lrcKey = k;
                        continue;
                }
        }
        meter.value = 100 * ct / du;
}

</script>

红影 发表于 2022-10-10 22:27

我都忘了当时做的什么了，不过这个几个跳舞小人熟悉的{:4_173:}

红影 发表于 2022-10-10 22:30

歌词同步做的好，这个视屏也用得很好。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2022-10-10 22:30

红影 发表于 2022-10-10 22:27
我都忘了当时做的什么了，不过这个几个跳舞小人熟悉的

谢谢红影的小人跳舞！

马黑黑 发表于 2022-10-10 22:49

连锁反应。不错的帖子。

醉美水芙蓉 发表于 2022-10-11 06:44

马黑黑 发表于 2022-10-10 22:49
连锁反应。不错的帖子。

谢谢黑黑老师光临！

马黑黑 发表于 2022-10-11 07:20

醉美水芙蓉 发表于 2022-10-11 06:44
谢谢黑黑老师光临！

{:4_190:}

红影 发表于 2022-10-11 09:07

醉美水芙蓉 发表于 2022-10-10 22:30
谢谢红影的小人跳舞！

问好水芙蓉美女，早上好{:4_204:}

大猫咪 发表于 2022-10-11 23:38

制作真棒！欣赏水芙蓉好帖！

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

醉美水芙蓉 发表于 2022-10-12 06:35

大猫咪 发表于 2022-10-11 23:38
制作真棒！欣赏水芙蓉好帖！

猫咪早上好！

查看完整版本: 来个舞曲跟红影学学