醉美水芙蓉 发表于 2026-8-19 22:38:43

夕阳黄昏《年画中的牛郎织女》

<meta name="referrer" content="never" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Long+Cang&display=swap);
:root        {--w:810px;--h:960px;}
        #oBlk        {
                width:var(--w);height:var(--h);margin:40px auto;
                position:relative;
        }
        #showSVG        {width:100%;height:100%;margin:auto;overflow:hidden;}
        #titleTxt        {
                font:550 1.5em 'Long Cang';
      text-shadow:
            1px 1px hsl(30,80%, 50%),
            -1px 1px hsl(30,80%, 50%),
            -1px -1px hsl(30,80%, 50%),
            1px -1px hsl(30,80%, 50%);
        }
                #controlBox         {width:80px;position:absolute; right:20px; bottom:30px; opacity: 0;transition: opacity 1.5s;}

/*---------------------lrcPlayerFrg.css---------------------------------------------*/
.lrcShow {
font: bold 2.5em 'ZCOOL KuaiLe';
                width:2em;
                height:660px;
                position:absolute;
                top: 40px;
                left: 10px;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 4px;
padding-left:10px;
/*===============================
        background: repeating-linear-gradient(
      45deg,
      white 1px,
      transparent 2px,
      gray 4px
    ),
    repeating-linear-gradient(-45deg, white 1px, transparent 2px, gray 4px);
                ==============================*/
-webkit-background-clip: text;
}
.sChar {
        display: block;
        padding: 0 2px;
        opacity: 0;
        transform: translate(var(--x), var(--y));
        animation: fadeIn 0.3s var(--delay) forwards;
}
@keyframes fadeIn {
        to {
                transform: translate(0, 0);
                opacity: 1;
        }
}
/*--------------------------------------------------------------------------*/
</style>
<div id="oBlk">
        <div id="showSVG"></div>
                <divclass="lrcShow" data-lrc='美丽中国走起来'></div>
                <div id="controlBox">
                        <svg viewbox="0 0 100 100" >
                                <circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4" />
                                <circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2" />
                                <path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
                        </svg>
                </div>
        </div>
</div>

<script>
//-----------------------------------------------------------------------------
const pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/ab3EGbUJgb9vehw8iceChD5fuojvVDg4tUzxoR70kToh4Xibto3znkDH6LLwT7ib7TYdWfiawricVsjj4J8v4KzhicCVxC8BNuOZjJ78nPJNe8Ql4/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb9RRGvYmRzibCGCB5AtsibfxFFjrd5I9MD3jQYSYHiaEVXEC8M12xrd00u4C5cpchEpmp93OhSES4LmkZ4USopRdBGJpicuDwmtpTE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb8eibBkyK5LnkP5O6YzukaIA2iaDN8CqloQsb7CJR49uhLMc14AYgBjRVWSdibnW8hia2n97FWkG6NIdicTBzKWQ0Gr6INmbdSNEk64/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgbicicKeA5azSXEHudhkt1NojVKleR16w4QMbEbTV0YXLGm4xJDz8gr6mmaSmgd5R4rRtf3ZevupibiamGRicSoHVqibZeVLwVdjqS7A0/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ab3EGbUJgb9ozVSRo5kn7aH28Oj9D4zFnicqwH6FDFOLz8LXicj6oB709z3pxUPyMK7CibTZA76icaCSQ42sHjgdJbVu951RjN3A7glYYsRtLSw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ab3EGbUJgbib5DgE2VzuWqFHywibiacbBYAKadn0nfCmSVtjNLH1zu8xI1RAcPHQOqHW9ibI1eLhMBMj4JlWibs9evMQNo25T2vfazEfefIBibLQs/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ab3EGbUJgb8zUVgtb9bpTt9chZoMibjXRh9rIaBqBTdDlJdW3NBWG4BJADOfiaKkyNRFJ6742TbX4jTmclScNndjuZfnEN05DFZsDiaU4lUF1Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb9Bicy9hyMpCRZk4TNnmPbLp3UspjMUlcIS6WH6tqLWDgDpXfib3noX8WxOppicqicvTvHACdKHzV5Ftt1lAZ1ovCbiayaekgJKUumg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb9ibGL9pk7WB7HnVia8qIw1qq59edtia3FctAVGb0d7n8b0s1QP3GulSKO94eYiaI4IIzxeS30UkSsej7rqGwk0RpibVhYlFQicCzlCg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb80zczkniaiaYUHzSjErDGHREjWsicBCIathVSeWicFwDViav8icJVYgictQNNZreHzOkBibsicJb6FZtYjvZHT1NEATicWHfR9ib0ZLzmTDI/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ab3EGbUJgb93224tzLhfO025tdJPvfEibdjqWjwCq9vHZKEQyfdzoQObe5yuejMNUSgQN0VXdc5feDYRuYiagh8rVlqX3jYY37KbADoP8kFjg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ab3EGbUJgbicQia7iaPIgic6CcOQm6ibwkPKUia3m3dSbibGT3ZV6UFzQ4Ht6gOedLibkmQlunOdDibIFicXBiciciaSnsQWfemib51K1RAmBDNVW2ibaWssps/640",];


let picArr = [], errCount = 0;

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
let getPictureSize = (url, pIdx) => {
    let img = new Image();
    img.onerror = () => {
      console.log(url + " 图片加载失败，请检查url是否正确");
      errCount++;
    };
    img.onload = () => {
      picArr.push({
      'index': pIdx,
      'url': url,
      'width': img.width,
      'height': img.height
      });
      img.onload = null; //避免重复加载
    }
    img.src = url;
}
let doAction = () => {
      let dataReady = () => {
      if (picArr.length != (pics.length - errCount)) setTimeout(dataReady, 50);
      else {
          picArr.sort(function(a, b) {
            return (a.index - b.index);
          });
          let tw = 0, th = 0;
          picArr.forEach(pic => {
            tw += pic.width;
            th += pic.height;
          });
          const viewWidth = tw / picArr.length, viewHeight = th / picArr.length;
          let opts = {
            width: viewWidth,
            height: viewHeight,
            showObj: showSVG,
            picAr: picArr
          };
          let sObj = new mkSVGPics(opts);
          sObj.makeSVGsegment();
          let svgObj = showSVG.querySelector('#' + sObj.getObjID());
          svgObj.style.marginTop = (showSVG.clientHeight - svgObj.clientHeight) / 2 + 'px';
          svgObj.style.marginLeft = (showSVG.clientWidth - svgObj.clientWidth) / 2 + 'px';
          svgObj.onmouseover = () => {
            svgObj.pauseAnimations();
          }
          svgObj.onmouseout = () => {
            svgObj.unpauseAnimations();
          }

      }
      }
      pics.forEach((url, pIdx) => getPictureSize(url, pIdx));
      dataReady();
}
loadJs("https://cccimg.com/down.php/af4d73a4781cb57f0e3e784a7383e369.js", doAction);
let playAction = () =>        {
                const lrc =`
七月初七\u3000李玲玉
有个传说关于爱情
一个凡人一个神仙
动人的故事
美丽而伤感
下雨的夜里
才能相见
有种凄哀在夜空中
随着银河缓缓流动
童话的主人就要离去
明年的今天
才能团圆
七月初七浪漫的纪念
相爱的人啊
期盼这夜晚
一天又一天
一年又一年
幸福的人啊
相伴永远
有种凄哀在夜空中
随着银河缓缓流动
童话的主人就要离去
明年的今天
才能团圆
七月初七浪漫的纪念
相爱的人啊
期盼这夜晚
一天又一天
一年又一年
幸福的人啊
相伴永远
七月初七浪漫的纪念
相爱的人啊
期盼这夜晚
一天又一天
一年又一年
幸福的人啊
相伴永远
幸福的人啊
相伴永远
                `;
                var opts = {
                        lrcTxt:lrc,
                        audioURL:'http://music.163.com/song/media/outer/url?id=261723.mp3'
                };
                let lrcPlayer = new lrcPlayerFrg(opts);
                const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
                const playPath = "M35 35 l30 15 -30 15 z";
                const musicObj = lrcPlayer.getAudObj();
                let pState = () =>        {
                        musicObj.paused ? (playCtrl.setAttribute('d', playPath), svgObj.pauseAnimations())
                                                        : (playCtrl.setAttribute('d', pausePath), svgObj.unpauseAnimations());
                };
               
               
                playCtrl.onclick = () => musicObj.paused ? (musicObj.play()) : (musicObj.pause());
                musicObj.addEventListener('play', () => pState());
                musicObj.addEventListener('pause', () => pState());

}
loadJs("https://i.uik.cc/down.php/afe4d8daccbbcd884924eace0d4e6936.js", playAction);
oBlk.onmouseover = () =>        {controlBox.style.opacity = 1;}
oBlk.onmouseout = () =>        {controlBox.style.opacity = 0;}

</script>

klxf 发表于 5 天前

好挺好看，谢谢精彩分享

醉美水芙蓉 发表于 5 天前

klxf 发表于 2026-8-22 17:24
好挺好看，谢谢精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 夕阳黄昏《年画中的牛郎织女》