论坛首页 › 播放器版 › 回不去的童年

醉美水芙蓉 发表于 2024-11-22 21:37:53

回不去的童年

<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);

#oBlk        {position:relative; width:800px;height:758px;margin:40px auto;background-color:hsl(0, 0, 80%);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#showSVG        {width:800px; position:absolute;left:0; top:0;}
#processMeter        {position: absolute; right:50px; bottom:-10px; width: 100px; height:100px; cursor: pointer;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2em 微软雅黑;
                        pointer-events:none;
                        left:20%;bottom: -10px;
                        filter: drop-shadow(2px 0px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow(0px -2px 0px white);
        }
        .lrcShow::before {
                        color:hsl(0, 50%, 50%);
        }
#oBlk {
        width:700px;
        height:700px;
        overflow:hidden;
        border-radius:24px;
        box-shadow:4px 4px 10px black;
        background-color:skyblue;
}
#pBlk {
        width:600px;
        height:578px;
        position:relative;
        margin:auto;
        top:50%;
        transform:translateY(-55%);
}
#pBlk div {
        background-repeat:no-repeat;
        float:left;
}
</style>
    <div id="oBlk">
                <div id='pBlk'></div>
        <div id="processMeter">
                <svg stroke-width="5" viewBox="0 0 150 150">
                        <!-- 背景圆形 -->
                        <circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
                        <text x="50%" y="50%" fill="#ffa020" text-anchor="middle" dominant-baseline="middle" stroke-width="1" style="font-size:24px;" id="procV">0%</text>
                        <!-- 进度条 -->
                        <circle class="process-circle" cx="75" cy="75" r="50" stroke="#ffa020" transform="rotate(-90 75 75)" fill="none" stroke-dasharray="314" stroke-dashoffset="314" style="stroke-dasharray: 313.652;"></circle>
                </svg>
        </div>
        <div class="lrcShow" data-lrc="回不去的何止时间"></div>
        </div>
    <script type="text/javascript">
      var pics = [
"https://img-volc.jianpian.info/14592807/article/20241122/ff19fecea4c54aca8de1e41b94f55314__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/57d744ae4d7e4cc183754de0aae09269__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b751bbd09d2d460c88759450672f9bff__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/e23018fe557649c993a3fbb671c54164__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/ca2eba34d58243d0880d4f9467c9cf7a__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/cd9b8973797a4a3a8ca1578e5a260447__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/20ce28db2eb7458e90215b7873f9d347__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/54362ab905a741d88340b1c3049846ae__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b1cd7fb769e047bbb63e23acdc788d99__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/d322431638a1400aa00d6ea9de72bbce__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b6185a1675aa4e4fa873c9788498e276__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/fac910edf3bb4017b46bdfaaaafa2798__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/9fba72f05a45472995989b49f5dc9f3f__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/7016b0c2a507496d9ddf1be0c3da8438__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/829d37afc2b44f2e810a1871f0404fcb__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/f45846d15d18474991bb3c46c71dfc9f__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/f2309f772f4242dca06995e672155901__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/94c29a5e12df4bb69c5d088d87408865__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/c1f4e33b486a43b8aca0c521034559b6__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg"
];
      let bw = pBlk.clientWidth / 20, bh = pBlk.clientHeight / 20;
      let picIdx = 0;
          
      for (var i = 0; i < 20; i++) {
      for (var j = 0; j < 20; j++) {
          var oDiv = document.createElement('div');
          oDiv.style.backgroundImage = `url(${pics})`;
          //oDiv.style.backgroundRepeat = `no-repeat`;
          oDiv.style.backgroundPosition = -j * bw + 'px ' + (-i * bh) + 'px';
          oDiv.style.width = bw + 'px';
          oDiv.style.height = bh + 'px';
          oDiv.style.transition = (0.3 + Math.random()) + 's';
          //oDiv.style.float = 'left';
          pBlk.appendChild(oDiv);
      }
      };

      var allDiv = pBlk.querySelectorAll('div');
      var t = null
          let chgPic = () => {
      let index = allDiv.length - 1;
      picIdx++; picIdx %= pics.length;
      t = setInterval(function() {
          if (index == -1) {
            clearInterval(t);
            allDiv.forEach(aDiv => {
            aDiv.style.opacity = 1;
            aDiv.style.transform = 'translateY(0px)'
            });
            return;
          }
          allDiv.style.backgroundImage = `url(${pics})`;
          allDiv.style.transform = 'translateY(200px)';
          allDiv.style.opacity = 0;
          index--;
      }, 20);
                setTimeout(chgPic, 15000);
      }
      chgPic();
          
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
    const processCircle = document.querySelector('.process-circle');
    // 获取圆的周长
    const circumference = processCircle.getTotalLength();
    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference;
   
    function setProcessCircle(percent = 0) {
                // 动态计算 offset 赋值给 strokeDashoffset
                // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
                processCircle.style.strokeDashoffset =
                  circumference * (1 - parseInt(percent) / 100)
        }

sf0.onload = () => {
        let lrctxt = `
回不去的何止时间
原唱：陈墨一
风吹过发梢 回忆又在呼啸
泪划过眼角 殒落在人潮
你看不染一尘的回忆
也终不抵那时过境迁
曾熟悉的画面 这褪色的房间
回不去的何止时间
风又起叶落地 思念更浓郁
自别离未停息
想见你拥抱你 想再看看你
可惜已来不及
看折旧的相机 存泛黄的记忆
模糊谁的眼睛
人常说的过去 早就已回不去
远行的候鸟 何时会再回巢
来时的轨迹 怎会被抹掉
你看不染一尘的回忆
也终不抵那时过境迁
曾熟悉的画面 这褪色的房间
回不去的何止时间 风又起
你问我人长大哪部分强行被遮掩
倔强地站在冷风中问今夕又是何年
像姗姗来迟的观众
赶不上热播的影片
只能在回放中
一遍一遍找寻我们的情节
人喜欢瞻前顾后 总是喜新厌旧
放下的放不下的都是为了表面说说
我怀念着我怀念着我们能无话不说
可惜都过去了我们也都走散了
风又起
风又起叶落地 思念更浓郁
自别离未停息
想见你拥抱你 想再看看你
可惜已来不及
看折旧的相机 存泛黄的记忆
模糊谁的眼睛
人常说的过去 早就已回不去
人常说的过去 早就已回不去
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://cccimg.com/view.php/c270554433cf82d7bdb47a29a2374967.mp3",
        }
        let player = new lrcPlayerY(opts);
       
        player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset =
                  circumference * (1 - processValue);
                procV.textContent = parseInt(processValue * 100) + '%';
        });
        processMeter.onclick = () => {
                player.mObj.paused ? player.mObj.play() : player.mObj.pause();
        }
       
}
    </script>

快播 发表于 2024-11-24 12:25:27

期待中......

夏艳妍 发表于 2024-11-24 21:17:47

支持！！！！！！

翁奕童苑 发表于 2024-11-26 12:10:24

支持！！！！前排！！！！

肖浅 发表于 2024-11-27 14:09:25

支持你们一下下哈

活跃概况 发表于 2024-11-27 21:22:11

看帖子的要发表下看法

翁奕童苑 发表于 2024-11-28 16:54:48

支持！！！！前排！！！！

夏艳妍 发表于 2024-11-30 07:01:04

好像还不错！

肖浅 发表于 2024-11-30 07:44:14

抢楼了，前排第一次啊

红尘过客 发表于 2024-12-2 10:57:20

谢谢楼主，，，收藏ing

查看完整版本: 回不去的童年