论坛 › 欢乐水吧 › 枫叶被红透

醉美水芙蓉 发表于 2022-5-9 21:56

枫叶被红透

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:30px;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/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/a038f3baf376761efdefa3472dcf4353.jpg" alt="" />
<img class='photo'src="http://bbs.cnzv.cc/pan/qun91530683/2022/05/04/046399c159c576a037f14e96b5e2515b.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/c83e6c29a97e0c735f4b9772692a060b.jpg " alt="" />
<img class='photo'src="http://bbs.cnzv.cc/pan/qun91530683/2022/05/04/a1337efe8b102e582fa6c52d06af4eb7.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/ae3aa4c2e4422779d7d0eed72cbc6f95.jpg" alt="" />
<img class='photo'src="http://bbs.cnzv.cc/pan/qun91530683/2022/05/04/610aa054ee3bf7b88832c445ef627250.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/351ed025b59f91d67c27df3037a0093e.jpg " alt="" />
<img class='photo'src="http://bbs.cnzv.cc/pan/qun91530683/2022/05/04/03db5fd1cfc421ddeaf36cf53be17812.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/219362691.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
       <img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png" id="playpause" style="position:absolute;top:23px;left:85px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 300;"/>
      
      </div>
<div class="img_border" id="aplay"></div>
   <div class="items" style="width: 980px; height: 120px;z-index: 200;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {6% {
    opacity: 1;}
10% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
25% {
opacity: 0;transform:translate(0%,0%)scale(3);
}

}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;z-index: 50;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;z-index: 200;
    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:-10px; left:50px;
    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: 45px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 13;position: absolute;
   top:-500px;
    left: 20px;
animation: rotating 0.52s linear infinite;}
@keyframes rotating {from {opacity: 0.4;filter:hue-rotate(360deg)contrast(100%)brightness(100%);background: linear-gradient(45deg, #000080, #003300, #ff0000, #00f000);}
50% {opacity: 0.05;background: linear-gradient(45deg, #00ff80, #003300, #ff0000, #00f000);}to {opacity: 0.5;filter:hue-rotate(0deg)contrast(100%)brightness(100%);background: linear-gradient(45deg, #000000, #00cc00, #ff0000, #00ff00);}}

</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg) drop-shadow(0px 0px 42px #fff000)drop-shadow(0px 0px 42px #fff000)drop-shadow(0px 0px 42px #fff000)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 42px #000090)drop-shadow(0px 0px 42px #000090)drop-shadow(0px 0px 42px #000090)brightness(100%);}}
</style>
<script >var lrc = `枫叶被红透 (DJ默涵版) - 雨中百合
词：孙书林
曲：于海利
LRC编辑：醉美水芙蓉
又逢深秋枫叶红透
缕缕相思涌满心头
回到枫林默默等候
等待找回最初情柔
又逢深秋暗香残留
一壶老酒醉了娇羞
站在村口痴痴等候
等待爱人陪在左右
人世间有多少无望的等候
枫叶红透依然等不到回首
等了一个深秋又一个深秋
山盟海誓早已经被风吹走
红尘里有多少无奈的分手
凋零红叶已经被寒风吹走
过了一个深秋再一个深秋
如钩弯月挂满了离别哀愁
人世间有多少无望的等候
枫叶红透依然等不到回首
等了一个深秋又一个深秋
山盟海誓早已经被风吹走
红尘里有多少无奈的分手
凋零红叶已经被寒风吹走
过了一个深秋再一个深秋
如钩弯月挂满了离别哀愁
如钩弯月挂满了离别哀愁
谢谢欣赏！`;
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://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

马黑黑 发表于 2022-5-10 07:43

第一，图片未能显示。图片来自网盘，可能防外链；

第二，歌词同步脚本程序未能正常运行，音乐也出不来。我写过一个歌词同步脚本，能在这里运行，前提是音乐要正常，详情请查看：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=57267&highlight=%B8%E8%B4%CA%CD%AC%B2%BD

第三，作为宽幅帖子，应考虑相对于screen的定位问题。

红影 发表于 2022-5-10 08:46

很漂亮的图片轮转，里面的女孩好美{:4_187:}

红影 发表于 2022-5-10 08:48

看了黑黑的回复，原来这个里面有歌词同步的啊。我因为没听到歌曲，还不知道这事呢{:4_173:}

加林森 发表于 2022-5-10 09:05

声音没有出来，播放器按钮点不动。

醉美水芙蓉 发表于 2022-5-10 11:35

马黑黑 发表于 2022-5-10 07:43
第一，图片未能显示。图片来自网盘，可能防外链；

第二，歌词同步脚本程序未能正常运行，音乐也出不来。 ...

谢谢老师点评！

醉美水芙蓉 发表于 2022-5-10 11:37

红影 发表于 2022-5-10 08:48
看了黑黑的回复，原来这个里面有歌词同步的啊。我因为没听到歌曲，还不知道这事呢

在这个网站只能手机欣赏！电脑欣赏不了！

醉美水芙蓉 发表于 2022-5-10 11:38

加林森 发表于 2022-5-10 09:05
声音没有出来，播放器按钮点不动。

老师好！这个网站好像只能手机欣赏，电脑欣赏不了！

加林森 发表于 2022-5-10 11:40

醉美水芙蓉 发表于 2022-5-10 11:38
老师好！这个网站好像只能手机欣赏，电脑欣赏不了！

是的，我在手机上能看见，也能听到。就是不知道在论坛就不行了呢？真奇怪。

马黑黑 发表于 2022-5-10 12:14

醉美水芙蓉 发表于 2022-5-10 11:35
谢谢老师点评！

{:4_190:}

醉美水芙蓉 发表于 2022-5-10 17:00

马黑黑 发表于 2022-5-10 07:43
第一，图片未能显示。图片来自网盘，可能防外链；

第二，歌词同步脚本程序未能正常运行，音乐也出不来。 ...

老师在这个论坛不知为何原因？手机欣赏图片声音都有，一切正常！电脑就无法观看了！其它论坛一切正常！

马黑黑 发表于 2022-5-10 18:16

醉美水芙蓉 发表于 2022-5-10 17:00
老师在这个论坛不知为何原因？手机欣赏图片声音都有，一切正常！电脑就无法观看了！其它论坛一切正常！

情况不明

大猫咪 发表于 2022-5-10 20:30

好听好看    {:4_187:}水芙蓉好制作！真棒！ {:4_190:}

醉美水芙蓉 发表于 2022-5-10 20:32

大猫咪 发表于 2022-5-10 20:30
好听好看    水芙蓉好制作！真棒！

猫咪老师电脑能够看见吗？

大猫咪 发表于 2022-5-10 20:34

醉美水芙蓉 发表于 2022-5-10 20:32
猫咪老师电脑能够看见吗？
可以速度很快的我就是用电脑看的   非常漂亮！


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

醉美水芙蓉 发表于 2022-5-10 20:36

大猫咪 发表于 2022-5-10 20:34
可以速度很快的我就是用电脑看的   非常漂亮！

电脑看得见图片，看不见同步歌词，手机都可以看到！

大猫咪 发表于 2022-5-10 20:40

醉美水芙蓉 发表于 2022-5-10 20:36
电脑看得见图片，看不见同步歌词，手机都可以看到！

我这可以看到啊   {:4_187:} 同步的字是一闪一闪的

红影 发表于 2022-5-11 10:14

醉美水芙蓉 发表于 2022-5-10 11:37
在这个网站只能手机欣赏！电脑欣赏不了！

哦哦，原来是这样啊。谢谢水芙蓉告知{:4_204:}

查看完整版本: 枫叶被红透