夕阳黄昏 发表于 2026-8-19 19:46

年画中的牛郎织女

<meta charset="utf-8">
<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>

梦江南 发表于 2026-8-19 19:54

{:4_174:}

梦江南 发表于 2026-8-19 19:55

年画很清晰，欣赏点赞{:4_187:}

梦江南 发表于 2026-8-19 19:57

祝老师七夕快乐，阖家幸福，幸福绵长！{:4_204:}

夕阳黄昏 发表于 2026-8-19 19:59

梦江南 发表于 2026-8-19 19:55
年画很清晰，欣赏点赞

谢谢欣赏支持！晚上好！

夕阳黄昏 发表于 2026-8-19 20:02

梦江南 发表于 2026-8-19 19:57
祝老师七夕快乐，阖家幸福，幸福绵长！

谢谢！
如您所说：七夕是年轻人的事，跟我们无关{:5_106:}

梦江南 发表于 2026-8-19 20:06

夕阳黄昏 发表于 2026-8-19 20:02
谢谢！
如您所说：七夕是年轻人的事，跟我们无关

是的，是商家赚钱的机会。{:4_173:}

霜染枫丹 发表于 2026-8-19 20:50

夕阳黄昏晚上好！小时候看年画，每一幅都漂亮，贴在墙上看一年。现在看年画，还是喜欢看。集中了这么多年画，有很多都没看过呢。

很漂亮的制作，歌曲好听，点赞！！七月七我们也跟着快乐！{:4_204:}{:4_190:}

小辣椒 发表于 2026-8-19 21:12

老师的代码制作真的太棒了，小辣椒欣赏加学习{:4_187:}

小辣椒 发表于 2026-8-19 21:13

这种 年画小辣椒都没有看见过，在老师帖里面欣赏了

小辣椒 发表于 2026-8-19 21:13

感谢老师分享，祝福天下有情人终成眷属

红影 发表于 2026-8-20 07:17

这些年画好美啊，是人们心里最美好的想像。歌曲也极好听呢。
欣赏夕阳黄昏老师的好帖{:4_199:}

夕阳黄昏 发表于 2026-8-20 07:55

梦江南 发表于 2026-8-19 20:06
是的，是商家赚钱的机会。

不知有没有收获{:5_117:}， 早上好！

夕阳黄昏 发表于 2026-8-20 07:56

霜染枫丹 发表于 2026-8-19 20:50
夕阳黄昏晚上好！小时候看年画，每一幅都漂亮，贴在墙上看一年。现在看年画，还是喜欢看。集中了这么多年画 ...

谢谢欣赏支持！ 早上好！

夕阳黄昏 发表于 2026-8-20 07:56

小辣椒 发表于 2026-8-19 21:12
老师的代码制作真的太棒了，小辣椒欣赏加学习

谢谢欣赏支持！ 早上好！

夕阳黄昏 发表于 2026-8-20 07:59

小辣椒 发表于 2026-8-19 21:13
这种 年画小辣椒都没有看见过，在老师帖里面欣赏了

以前没有电脑，过年采购这样的年画装饰家里。

天津杨柳青是有名的年画之乡，不知现在还是否存在。

夕阳黄昏 发表于 2026-8-20 08:00

红影 发表于 2026-8-20 07:17
这些年画好美啊，是人们心里最美好的想像。歌曲也极好听呢。
欣赏夕阳黄昏老师的好帖

谢谢欣赏支持！ 早上好！

梦江南 发表于 2026-8-20 10:20

夕阳黄昏 发表于 2026-8-20 07:55
不知有没有收获， 早上好！

没有报道消费情况，现在的年轻人也理智了。

夕阳黄昏 发表于 2026-8-20 18:32

梦江南 发表于 2026-8-20 10:20
没有报道消费情况，现在的年轻人也理智了。

生意难做{:5_102:}

梦江南 发表于 2026-8-20 18:44

夕阳黄昏 发表于 2026-8-20 18:32
生意难做

好做的也有，
页: [1] 2
查看完整版本: 年画中的牛郎织女