张红 发表于 2023-6-8 17:04

张玮伽-《梦里水乡》




<style type="text/css">
#outer{
      left: 0px;top:30px;
      width: 1000px;
      height:600px;
       box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow:
hidden;transform:rotate(0deg);background: url('http://storage.live.com/items/1965B2B1656C2AF6!16389?')0 0/100%100%;
      position: relative;
       display: grid;
       --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#mLiDiv {position: relative; margin-top: 200px;margin-left: 200px; color:#000; width:280px;height:200px; font-size:16px; font-family:微软雅黑;z-index: 10;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:blue; }
#tmsg {
         position: absolute;
      font: normal 16px sans-serif;
      color: #000;
         top:568px;
      left:860px;
}

#prog {
      position: absolute;
      width: 780px;
      height: 3px;
      cursor: pointer;
         top:577px;
         left:17px;
box-shadow:0px 0px 0px 0.5px #fff
}


</style>
               <div id="outer">
                  <div id="mLiDiv"></div>
               <divid="prog"></div>
                <span id="tmsg">00:00 | 00:00</span>
            
</div>
<script>
var muAr = [["http://fs.ringop.kugou.com/KGTX/CLTX001/8b7ab226dadc5d9a4e8db0535f2f4496.mp3","莫斯科郊外的晚上"],
["http://fs.ringop.kugou.com/KGTX/CLTX003/cfcb0ef87b4a5e9c394fcf3c39d64701.mp3","映山红"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/98d87e66c7ff2733937cfa4966a93fe9.mp3","我的祖国"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/a93b81c06c677fb595fa006a0ee6d855.mp3","浏阳河"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/f3137dec0959c0431e0cf316322670cd.mp3","茉莉花"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/fd529d332732bd57e904fa3fc3a8542f.mp3","南泥湾"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/00eb872747c3446c71450d988832ace4.mp3","洪湖水浪打浪"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/fb2c7fa7e270172920b9a22c0e6c491d.mp3","雁南飞"],
["http://fs.ringop.kugou.com/KGTX/CLTX003/f5d87c3653afd7e92134c2907c92ee95.mp3","梦里水乡"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/667ed3704dcbb47c7da574a27bdb0e12.mp3","阿里山的姑娘"],
["http://fs.ringop.kugou.com/KGTX/CLTX001/5136cac0efddf0c7349ea992a3071b5a.mp3","大海啊，故乡"]
];

var mLi = document.getElementById('mLiDiv');
var aud = document.createElement('audio');
var playIdx = 0;
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      nameRed(playIdx);
}
aud.onended = function() {
      playIdx ++;
      if(playIdx >= muAr.length) playIdx = 0;
    aud.src = muAr;
    aud.play();
nameRed(playIdx);
}

function nameRed(){
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

      prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }

      aud.addEventListener('timeupdate', () => {
               prog.style.background= 'linear-gradient(90deg, rgba(0,0,255,1)' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });

      let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

iPlay(playIdx);
</script>

巫荣云师 发表于 2023-6-8 19:49

欣赏收藏老师的佳作《梦里水乡》。:handshake{:1_293:}问好点赞!

容轩听雨 发表于 2023-6-8 21:24

画面灵动，歌曲寄情，赞，问好朋友！

久久. 发表于 2023-6-8 22:22

晚上好！张红{:1_292:}

久久. 发表于 2023-6-8 22:23

帖子制作的漂亮

久久. 发表于 2023-6-8 22:23

音乐好听，谢谢分享！支持点赞{:1_293:}

蓝魔 发表于 2023-6-9 00:25

欣赏一下，谢谢。
页: [1]
查看完整版本: 张玮伽-《梦里水乡》