亚伦影音工作室 发表于 2022-6-30 14:47

火火的爱 (DJ版) - 莎婳【可控】

本帖最后由 亚伦影音工作室 于 2022-7-2 11:06 编辑 <br /><br /><div style="z-index: 27;width: 1200px; height: 635px; 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(http://chuangshicdn.data.mvbox.cn/album/22/06/30/22063012111375877295.png) 0 0/100% 100%,url(https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg)0 0px/100% 100%; text-align: center;">
<P id="picBtn" class=""style="width: 150px; height: 150px;position: absolute;top:440px; left:40px;background: url('http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif') 0 0/100% 100%;z-index: 70;"></p>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=63255903" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="img_border" id="aplay" style="width: 1200px; height: 635px;background: url(http://chuangshicdn.data.mvbox.cn/album/22/06/30/22063012111375877295.png) 0 0/100% 100%,url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)0 0px/100% 100%;position: absolute;top:0px; left:0px;z-index: 50;"></div>
<div class="items " style="width: 980px; height: 120px;z-index: 60;position: absolute;top:450px; left:120px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.container{width: 0px;left:0px; position: absolute;top:0px; left:0px;z-index: 30;
    margin: 0;}
.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: 40px;
    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;position: absolute;text-align: center;}
.container .img_border #aplay{display:block; }
.container .z360z{ width:1200px;height:635px;animation: rot 10s linear infinite;}@keyframes rot{100% {
transform:translate(0%,0%) rotateX(60deg)rotateY(180deg) translateZ(40px) scale(0);
}
50% {
transform: translate(0%,0%)rotateX(0deg)rotateY(-180deg) translateZ(-40px) scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(100%);width: 1200px; height: 635px;background: url(https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg)0 0px/100% 100%;}
}
20% {
transform: translate(0%,0%)rotateX(0deg)rotateY(180deg) translateZ(-40px) scale(1);}
0% {
transform: translate(0%,0%)rotateX(0deg)rotateY(-180deg) translateZ(40px) scale(1);}

}
</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 = `火火的爱 (DJ版) - 莎婳
词：聂俊峰
曲：竹影依依
萨日朗花开一朵朵
那是草原燃烧的火
是谁在马背上唱情歌
点燃了心中爱的火
红红的篝火一朵朵
那是恋人深情的火
柔柔的叫一声好哥哥
羞得那月亮云后躲
火火的眼神 火火的爱
火火的情歌唱天籁
快乐装满了银酒杯
绵绵的情意醉在心窝窝
火火的草原 火火的爱
火火的喜讯传的快
幸福装满了勒勒车
红红的日子火火的过
萨日朗花开一朵朵
那是草原燃烧的火
是谁在马背上唱情歌
点燃了心中爱的火
红红的篝火一朵朵
那是恋人深情的火
柔柔的叫一声好哥哥
羞得那月亮云后躲
火火的眼神 火火的爱
火火的情歌唱天籁
快乐装满了银酒杯
绵绵的情意醉在心窝窝
火火的草原 火火的爱
火火的喜讯传的快
幸福装满了勒勒车
红红的日子火火的过
火火的眼神
火火的爱
火火的情歌唱天籁
快乐装满了银酒杯
绵绵的情意醉在心窝窝
火火的草原
火火的爱
火火的喜讯传的快
幸福装满了勒勒车
红红的日子火火的过`;
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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-07/01/21/202207012133048971-5769293.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-07/01/21/202207012133048971-5769293.png')0 0/100% 100%";
})


</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>

红影 发表于 2022-6-30 15:49

制作漂亮，歌曲好听。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2022-6-30 18:08

这个界面大了一点比前面那种漂亮了{:4_199:}

绿叶清舟 发表于 2022-6-30 18:53

界面真漂亮，欣赏亚伦好贴

醉美水芙蓉 发表于 2022-6-30 19:50

亚伦影音工作室 发表于 2022-6-30 21:08

红影 发表于 2022-6-30 15:49
制作漂亮，歌曲好听。欣赏亚伦老师好帖

谢谢版主，有建议提出来，我改进！

亚伦影音工作室 发表于 2022-6-30 21:10

小辣椒 发表于 2022-6-30 18:08
这个界面大了一点比前面那种漂亮了

大图大气我也是这样认为的，谢谢支持！

亚伦影音工作室 发表于 2022-6-30 21:13

播放器特点：点唱盘，画面，音乐，歌词同时暂停！

红影 发表于 2022-7-1 15:38

亚伦影音工作室 发表于 2022-6-30 21:08
谢谢版主，有建议提出来，我改进！

我不行的，我都是跟在后面玩的，哪提得出建议，我欣赏还来不及呢{:4_173:}

马黑黑 发表于 2022-7-1 20:30

亚伦影音工作室 发表于 2022-6-30 21:13
播放器特点：点唱盘，画面，音乐，歌词同时暂停！

唱盘没能显示
页: [1]
查看完整版本: 火火的爱 (DJ版) - 莎婳【可控】