论坛 › 欢乐水吧 › 马黑老师的代码我用了

亚伦影音工作室 发表于 2022-7-7 23:08

马黑老师的代码我用了

本帖最后由 亚伦影音工作室 于 2022-7-7 23:08 编辑 <br /><br /><style>
#papa {margin-top:0px; margin-left:0px;width: 1024px; height: 600px; background: #ccc url(http://pan.yinhuabbs.cn/view.php/e06aea3e3f6217787d59bc4e58d6ce9f.jpg) no-repeat center/cover;}
.piece { position: absolute; left: 120px;top: 350px; bottom: 150px; width: 200px; height: 120px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom;

transition: all 1s; }
.piece:hover { box-shadow: 2px 2px 34px #fff; cursor: pointer; }

</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:30px; margin-left:-130px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(http://data.mvbox.cn/album/22/03/06/22030614333835236148.jpg); text-align: center;">
<div id="papa">
        <div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=225167836&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 300;position: absolute;top:-400px; left:40px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="items1" >
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div></div>
   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>
</div>
<script>
let flags = [...Array(6)].map((x,y) => y*0);
let zIdx = 0, slip = 0;
let picAr = [
        'http://pan.yinhuabbs.cn/view.php/cf263e8d8622d2f9be2198dd81cd653c.jpg',
        'http://pan.yinhuabbs.cn/view.php/546558ea311edd3b4691b17e977bd282.jpg',
        'http://pan.yinhuabbs.cn/view.php/bbf94c953006ea0828c218112fb3c056.jpg',
        'http://pan.yinhuabbs.cn/view.php/665b96c0e28ba392a8f20550324fb9b7.jpg',
        'http://pan.yinhuabbs.cn/view.php/d27e06dd9137ecb9cf19f0edd13eafd6.jpg',
        'http://pan.yinhuabbs.cn/view.php/185b562f31486a8206e214c127d8772b.jpg',
];

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(520px, -100px) 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 --;
                }
        }
});

</script>
<script >var lrc = `转眼我们都老了 - 王爱华
词：徐晓岚
曲：李勇军
编曲：姜凯升（姜山）
出品人：亚伦
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 = 80, lrc_ul_height = 90;
    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>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="";
                }
            }
      }
    </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);

my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i

+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script>

<style type="text/css">
.container{width: 0px;height: 0px;
    margin: 0;position: absolute;top:500px; left:-0px;z-index: 100;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0;
}
.container .lrc{
    width: 660px;
    height: 180px;z-index: 1;
    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:-100px; left:400px;
    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: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 30px;
    color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    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;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-400px; left:80px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.2);}
}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;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 >

    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,
      };
    }
}
</script>
<script>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="";
                }
            }
      }
    </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-7-8 06:46

图片为在新标签打开能打开，在帖子里不能正常显示

加林森 发表于 2022-7-8 08:51

挺不错的。

红影 发表于 2022-7-8 10:50

这些红衣美人好漂亮啊。欣赏亚伦老师精美制作{:4_187:}

查看完整版本: 马黑老师的代码我用了