论坛首页 › 单图音画 › 碧水蓝天

醉美水芙蓉 发表于 2024-12-13 20:37:59

碧水蓝天

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root{--rState:running;--w:1400px;--h:800px;--fw:1400px;--fh:800px}

#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}


.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;}
.lrcShow::before{color:hsl(0,80%,80%);}
#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--fw);height:var(--fh);position:absolute;z-index:1;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}
.zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;}
.zxx-slide-img{width:var(--fw);height:var(--fh);}
@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}
#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:33;}
#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="outBlk">

<span id="fullscreen">全屏观赏</span>


<zxx-slide></zxx-slide>
                <svg stroke-width="5" viewBox="0 0 200 100" id="processMeter">
                        <!-- 背景圆形 -->
                        <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"fill="none" ></path>
                        <!-- 进度条 -->
                        <path
                        class="process-circle"
                        d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                        stroke="darkred"
                        fill="none"
                        stroke-dasharray="455"
                        stroke-dashoffset="455"
                        ></path>
                        <defs>
                  <clipPath id="clip">
                            <circle cx="100" cy="50" r="41" />
                  </clilpPath>
            </defs>
                        <image xlink:href="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
                        <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
                </svg>      
      <div class="lrcShow" data-lrc="碧水蓝天" >碧水蓝天</div>
</div>

<script>

    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)
      }
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);

sf0.onload = () => {
      let circlePoints = [];
      let bgcLen = bgc.getTotalLength();
      for(let i = 0; i < bgcLen; i++)      {
                circlePoints.push(bgc.getPointAtLength(i));
      }
      console.log(circlePoints);
      let lrctxt = `

      `;
      let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://www.joy127.com/url/109961.mp3",
      }
      let player = new lrcPlayerY(opts);
      //console.log(player.lrcVec);
let pics = [
"https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif",
"https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif",
"https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif",
"https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif",
"https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif",
"https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif",
"https://pic.imgdb.cn/item/674d826dd0e0a243d4dbf8d4.gif",
"https://pic.imgdb.cn/item/674d8282d0e0a243d4dbf8f2.gif",
"https://pic.imgdb.cn/item/674d8295d0e0a243d4dbf916.gif",
"https://pic.imgdb.cn/item/674d82a8d0e0a243d4dbf930.gif",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
      let aObj = document.createElement('a');
      aObj.className = 'zxx-slide-a';
      let imgObj = document.createElement('img');
      imgObj.src = pic;
      imgObj.className = 'zxx-slide-img';
      aObj.appendChild(imgObj);
      eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
    let timerSlide = null;
    let indexSlide = 0;
   
    // 对应的元素
    let eleSlides = [].slice.call(container.querySelectorAll('a'));
    let eleButtons = [].slice.call(container.querySelectorAll('button'));
    let funSlide = function() {
      eleSlides.forEach(function(slide, index) {
      if (!player.mObj.paused) {
          if (indexSlide == index) {
            slide.classList.add('in');
          } else if (slide.classList.contains('in')) {
            slide.classList.remove('in');
          }
      }
      });
      timerSlide = setTimeout(function() {
      indexSlide++;
      if (indexSlide == eleSlides.length) {
          indexSlide = 0;
      }
      funSlide();
      }, 8000);
    }
    indexSlide++;
    setTimeout(funSlide, 8000);
});

      let formatTime = (time) => {
                let str = '';
                let min = parseInt(time / 60);
                let sec = parseInt(time % 60);
                return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
      };
      player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset = circumference * (1 - processValue);
                durTime.textContent = formatTime(player.mObj.duration);
                curTime.textContent = formatTime(player.mObj.currentTime);
      });
      rPlayer.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
      }

      let seeking = false;
      let moveEventProc = (event)      =>      {
                if(!seeking)      return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX), my = (point.y - event.offsetY)
                        let mv = mx*mx + my*my;
                        if(mv < minV)      {
                              minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / circumference;
                let chkTime = player.mObj.duration * chkVal;
                processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
                for(i = 0; i < player.lrcVec.length; i++)      {
                        if(player.lrcVec.seconds >= chkTime)      {
                              //console.log(player.lrcVec.seconds, i);
                              player.idx = i;
                              player.mObj.currentTime = chkTime;
                              break;
                        }
                };
      };
      processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
      bgc.addEventListener("mousemove", (event) => moveEventProc(event));
      processCircle.onclick = bgc.onclick = () => seeking = !seeking;         
}

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                              if(fs) {outBlk.style.setProperty('--fw',window.screen.width + 'px');outBlk.style.setProperty('--fh',window.screen.height + 'px');}
                fs = !fs;
      };
</script>

klxf 发表于 2024-12-14 02:29:14

漂亮！谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-12-14 07:07:28

klxf 发表于 2024-12-14 02:29
漂亮！谢谢醉美管理员精彩分享

哈哈！你的作品，搬家瞧瞧！

klxf 发表于 2024-12-14 09:59:45

醉美水芙蓉 发表于 2024-12-14 07:07
哈哈！你的作品，搬家瞧瞧！

呵呵，欢迎搬家，搬家快乐:)

查看完整版本: 碧水蓝天