论坛 › 欢乐水吧 › 想要忘记却无能为力

醉美水芙蓉 发表于 2022-6-13 20:37

想要忘记却无能为力

本帖最后由 醉美水芙蓉 于 2022-6-13 20:39 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0"> <div style="z-index: 27;width: 1200px; height: 625px; margin-top:30px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(#)0 0px/100% 100%; text-align: center;">

<img src="https://s1.ax1x.com/2022/06/13/XWqIdf.png" id="playpause"style="position:absolute;top:380px;left:35px;width:150px;height:200px;z-index: 60;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=222639199&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="img_border" id="aplay"><img class='photo'src="https://img-baofun.zhhainiao.com/fs/887b633d6902c306d3365f4d91b7a02d.jpg" style="width: 650px; height: 420px;z-index: 66;position: absolute;top:50px; left:420px;-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);"></div>
   <div class="items " style="width: 980px; height: 120px;z-index: 66;position: absolute;top:520px; left:120px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.container{width: 1200px;height: 625px;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ecab8f6b82a807dbebca0983e7631526.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;
    margin: 0;position: absolute;top:0px; left:0px;z-index: 5;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:0px; left:0px;z-index: 66;
    margin: 0 auto;}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1200px;height:625px;margin:0px ;position: absolute;top:0px;left:0px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1200px; height: 625px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%, url(https://img-baofun.zhhainiao.com/fs/cb28dc28cc0abe686632b5131b4ed70e.jpg)0 0px/100% 100%;
    z-index: 1;position: absolute;
   top:0px;
    left: 0px;
animation: rotating 6s linear infinite;}
@keyframes rotating {100%{
      transform: scale(1);opacity: 0; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
    }

      50%{transform: scale(1, 1);opacity: 1; filter:hue-rotate(360deg)contrast(120%)brightness(100%);
    }
0%{
      transform: scale(3);opacity: 1; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
    }
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc = `晨熙 - 想要忘记却无能为力
作词：张灵茹
作曲：陈浩
编曲：KITO
和声：姚斯婷
混音：邓华升
制作人：唐欣宇
宣发：张丹娴、廖文婷
统筹：唐欣宇
监制：胡伟
OP：深圳启韵文化传媒有限公司
我拼尽全力想要忘记
发现一切不过徒劳而已
你从 我身边搬到 心里
怎么 驱赶 都挥之不去
夜色慢慢降临而你却远去
寂寂四周满是失落的空气
没有了你生活该怎么继续
是醉是醒还是沉沦到梦里
想要长相厮守却走到别离
相思风生水起摇荡着结局
破碎的心多想粘合到一起
有伤有痛有谁能给我 怜惜
我拼 尽全力想要忘记
发现自己根本无能为力
你联合往事住进 回忆
威风凛凛霸占我 领地
我拼尽全力想要忘记
发现一切不过徒劳而已
你从 我身边搬到 心里
怎么 驱赶 都挥之不去
想要长相厮守却走到别离
相思风生水起摇荡着结局
破碎的心多想粘合到一起
有伤有痛有谁能给我 怜惜
我拼尽全力想要忘记
发现自己根本无能为力
你联合往事住进 回忆
威风凛凛霸占我 领地
我拼尽全力想要忘记
发现一切不过徒劳而已
你从我身边搬到 心里
怎么驱赶都挥之不去
我拼尽全力想要忘记
发现自己根本无能为力
你联合往事住进 回忆
威风凛凛霸占我 领地
我拼尽全力想要忘记
发现一切不过徒劳而已
你从我身边搬到 心里
怎么驱赶都挥之不去
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 50;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
         var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-06/08/10/202206081049575231-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="https://s1.ax1x.com/2022/06/13/XWqIdf.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
</td></tr></table>
   

加林森 发表于 2022-6-13 20:47

这只猫猫是播放器啊。挺好看的。歌曲也好听。加油！{:4_199:}

红影 发表于 2022-6-13 20:56

好漂亮的制作，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-6-13 21:31

加林森 发表于 2022-6-13 20:47
这只猫猫是播放器啊。挺好看的。歌曲也好听。加油！

是的！谢谢队长鼓励！

醉美水芙蓉 发表于 2022-6-13 21:31

红影 发表于 2022-6-13 20:56
好漂亮的制作，欣赏水芙蓉好帖

谢谢红影支持鼓励！

加林森 发表于 2022-6-13 21:37

醉美水芙蓉 发表于 2022-6-13 21:31
是的！谢谢队长鼓励！

不客气。

小辣椒 发表于 2022-6-13 21:48

水芙蓉这个做的特别漂亮{:4_178:}

绿叶清舟 发表于 2022-6-13 21:50

芙蓉好制作啊，那猫真乖啊一点歌停画面也停了{:4_204:}

醉美水芙蓉 发表于 2022-6-13 22:31

小辣椒 发表于 2022-6-13 21:48
水芙蓉这个做的特别漂亮

谢谢美女欣赏鼓励！

醉美水芙蓉 发表于 2022-6-13 22:31

绿叶清舟 发表于 2022-6-13 21:50
芙蓉好制作啊，那猫真乖啊一点歌停画面也停了

谢谢美女欣赏鼓励！

绿叶清舟 发表于 2022-6-13 22:32

醉美水芙蓉 发表于 2022-6-13 22:31
谢谢美女欣赏鼓励！

芙蓉客气了

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

@大猫咪 按钮漂酿

醉美水芙蓉 发表于 2022-6-14 06:44

马黑黑 发表于 2022-6-13 23:14
@大猫咪 按钮漂酿

谢谢老师光临支持！

樵歌 发表于 2022-6-14 07:16

真好，大家都来抚摸大猫咪。{:4_173:}

马黑黑 发表于 2022-6-14 07:41

醉美水芙蓉 发表于 2022-6-14 06:44
谢谢老师光临支持！

{:4_190:}

醉美水芙蓉 发表于 2022-6-14 11:32

樵歌 发表于 2022-6-14 07:16
真好，大家都来抚摸大猫咪。

问候樵歌中午好！

马黑黑 发表于 2022-6-14 12:23

樵歌 发表于 2022-6-14 07:16
真好，大家都来抚摸大猫咪。

心术不正{:4_170:}

红影 发表于 2022-6-14 22:48

醉美水芙蓉 发表于 2022-6-13 21:31
谢谢红影支持鼓励！

不客气啊，水芙蓉真棒{:4_187:}

樵歌 发表于 2022-6-15 06:45

醉美水芙蓉 发表于 2022-6-14 11:32
问候樵歌中午好！

早上好{:4_190:}

樵歌 发表于 2022-6-15 06:46

马黑黑 发表于 2022-6-14 12:23
心术不正

你想歪了{:4_189:}

查看完整版本: 想要忘记却无能为力