论坛首页 › 单图音画 › 金童玉女

醉美水芙蓉 发表于 6 天前

金童玉女

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2em 微软雅黑;
                        pointer-events:none;
                        left:20%;bottom: 0px;
                        color:darkgray;
                        z-index:99;
        }
        .lrcShow::before {
                        color:hsl(235, 50%, 60%);
        }

#outBlk {
    position: relative;
    width: 900px;
    height: 1012px;
    background: #000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;
    overflow: hidden;
    margin-top:30px;
        left:50%; transform: translate(-55%);
    box-shadow: 4px 4px 10px #000;
}

zxx-slide {
    width: 100%;
    height: 100%;
    position: absolute;
}

.zxx-slide-a {
    position: absolute;
    cursor: default;
        pointer-events:none;
}

.zxx-slide-a.in {
    z-index: 1;
    animation-duration: 2s;
    animation-name: brightnessIn;
        transition: 1s;
}

.zxx-slide-img {
    width: 100%;
    height: 100%;
}

@keyframes brightnessIn {
    0% {
      filter: blur(15px);
    }

    100% {
      filter: blur(0);
    }
}
#processMeter        {position: absolute; right:20px; bottom:-10px; width: 100px; height:100px; cursor: pointer; z-index:100;}
#rPlayer        {transform-origin:50%; animation: rot 5s linear infinite var(--rState);}
@keyframes        rot        {to {transform:rotate(1turn)}}
</style>
<div id="outBlk">
<zxx-slide>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcs5icpz08xMVa17XR6TfF3Y4nY3icUqa2EMfZac6IH6f46o0Kib3mOARVg/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcVs8cGJnf4VqzsoYAAefjtFHcl5DoRTsYRbUG3zBCnXUegkgkPkp5WA/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcW93vBkHOf2JgLNUKmKXzz25XGO8AibT3LJIGnGVr4MUbuCiaA1O1VB2Q/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcCrNI6S3Tt4ibI8ibiatGCyQac25zI9RQviauhibWOAVOictSYNd8G3jw1iaAg/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcibQ12yCFgvcsrvicly4WOnia8JA31g5d5BDN9qRcPaKf8kdws3qBo77dA/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcODMh4IdgIqWIPpR8oX7gKIls72iaXGAydbhiceywbMjJlChUIpXe8ggQ/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gc5lGUaBuUePDAuPGl0QUpjRJsu6eTXEGHxmE5nqh7Ls5M2THfeGYhnw/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcTqxNaTicxLcRdomuG35z9D9pxUbXpLicbc4OkO7qFQUUOFE8ZZshDicVQ/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcNWANLCfColP23dhSS8Co8KMQjKs6PjKicKUNecZBpyDo3yticSQpdY0A/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcdJw6CkKy9LQI2XicPQBG1aTs2dTk34k4lDiayzGnh82euuA1G0FaM6iag/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gccXhsFj1lg7gAMsVrXcOk34DL79HYJaa1pPIHIhICZyJToR0PWictDCQ/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcvtT7rLUIJ1ax7kN7e98oaKMXWEngyibTyPgG2uUswk7eicVbDtfCfSCw/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcJB0Az2jia4XfPeTzkNVwkeibPpQNsPDCjK1kVA6n56t3TM97wOCeicchQ/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcf3xvFzbAuGEPpiaKNbCxvFQicmKHicltKsY7ZGTBTOeyRqu5ibzIBUYPDw/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcS8Qo8U7uddK4xmXkSTa8ZorQZtVuLuO8ub6f8iajjGkibtNicluxHuCMw/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gc3sUgosFNym0Dtu3jfMicD5GgVqX06Aia6kLTiaCmkPd4z5WuntUtF2vAA/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcc0U2hun2P406doHAddicTPb7qdRBE59YtdqlUlAXUK2wfhOOcCAd8CQ/640">
    </a>
    <a href class="zxx-slide-a">
      <img class="zxx-slide-img" src="https://mmbiz.qpic.cn/mmbiz_jpg/3q53Kkd7wIlbeJib92TicruRRJEdLCY0gcl6Ewby1iaicxLK0WTNrsztmxKUaRibsdYcE2ak4tDCcW8Z9O7GlLPEZKg/640">
    </a>
</zxx-slide>
        <div id="processMeter">
                <svg stroke-width="5" viewBox="0 0 150 150" >
                        <!-- 背景圆形 -->
                        <circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
                        <!-- 进度条 -->
                        <circle
                          class="process-circle"
                          cx="75"
                          cy="75"
                          r="50"
                          stroke="darkred"
                          transform="rotate(-90 75 75)"
                          fill="none"
                          stroke-dasharray="314"
                          stroke-dashoffset="314"
                        ></circle>
                        <defs>
                    <clipPath id="clip">
                            <circle cx="75" cy="75" r="40" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://img1.kuwo.cn/star/albumcover/300/s4s15/60/1687476394.jpg" width="80" height='80' x="35" y="35" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
                </svg>       
        </div>
        <div class="lrcShow" data-lrc="金童玉女" >金童玉女</div>
</div>
<span id="lrcStr" style="visibility: hidden;">
</span>
<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 lrctxt = `
金童玉女

演唱：翊歌、李黄叽、小阔乐、无终
-
翊歌：
有新词一阕 字字情深
恩爱莫相负 死难谶
一如初相见 似梦还真
纸灰哀飞落 扑黄尘
-
翊歌：
书生折垂柳 谁识良辰
花下逡巡 恼杀故人
小姐抛芳杜 空惹香尘
此身为祭 藏无痕
-
李黄叽：
谁是 贪情缘 为利留住
谁是 图利禄 情为赢局
谁是 交颈鸳鸯 求自福
问因果 卿不担负
-
小阔乐：
采嫣红竞春暮
鬼灯青琐细 满地竹阴枯
子规啼血枝头住
只易不语 此恨无据
-
小阔乐：
病起正逢秋暮
谁怜双死树 记得春负
生憎鹦鹉能言语
缭绕诵新声 解侬心绪
-
M
-
李黄叽：
谁引无缘 相思装恨
言不有衷 红豆休问
婉转唱金缕 命运妒人
了妄唯真 即是神
-
翊歌：
谁是 贪情缘 为利留住
李黄叽：
谁是 图利禄 情为赢局
小阔乐：
谁是 交颈鸳鸯 求自福
无终：
问因果 卿不担负
-
无终：
采嫣红竞春暮
鬼灯青琐细 满地竹阴枯
子规啼血枝头住
只易不语 此恨无据
-
无终：
病起正逢秋暮
谁怜双死树 记得春负
生憎鹦鹉能言语
缭绕诵新声 解侬心绪
-
合：
金玉之命如何
柳梢香烟重 相思换春罗
逢场戏谑情轻诺
泽畔烟波里 红线深锁
-
合：
假意真心如何
杜宇声残咽 雨脚嫌多
言语似云利偎著
她生似这般 白首相托
-E-
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://music.163.com/song/media/outer/url?id=2620640946.mp3",
        }
        let player = new lrcPlayerY(opts);
       
          var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
    var timerSlide = null;
    var indexSlide = 0;
    container.addEventListener('mouseover', function() {
      clearTimeout(timerSlide);
    });
    container.addEventListener('mouseout', function() {
      clearTimeout(timerSlide);
      funSlide();
    });
    // 对应的元素
    var eleSlides = [].slice.call(container.querySelectorAll('a'));
    var eleButtons = [].slice.call(container.querySelectorAll('button'));
    var 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();
      }, 10000);
    }
    indexSlide++;
    setTimeout(funSlide, 10000);
});

        player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset =
                  circumference * (1 - processValue);
        });
        processMeter.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
        }

}
</script>

klxf 发表于 5 天前

很有特色！谢谢醉美管理员经典分享~

查看完整版本: 金童玉女