论坛 › 欢乐水吧 › 《沁园春·雪》- 学习难难老师贴《白狐》

杨帆 发表于 2025-1-16 19:55

《沁园春·雪》- 学习难难老师贴《白狐》

本帖最后由 杨帆 于 2025-1-17 18:11 编辑 <br /><br /><style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
        /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.6em 华文中宋;
                        pointer-events:none;
                        left:28%;bottom: 15px;
                        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:1080px;height:720px; position: relative; margin:90px 0 40px calc(50% - 621px);
                background: #ccc ;
                padding:16px;
                overflow:hidden;
                border-radius:32px;
                box-shadow:3px 3px 6px darkgray;
        }
        #showSVG        {position:absolute; left:0px;top:0px;width:100%;height:110%;}
#processMeter        {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
#pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px;z-index:3;mix-blend-mode: screen; z-index:1;}
</style>

<div id="oBlk">
<img id="pic"src="https://pic1.imgdb.cn/item/66b5074cd9c307b7e98f80c2.gif" alt="" />

        <div id="showSVG"></div>
                <div id="processMeter">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="35" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://pic1.imgdb.cn/item/668809bad9c307b7e9768059.png" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <g fill='none' stroke-width='5'>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="pink" id="fgc"></path>
                        </g>
                          <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
                                <text x="82%" y="55%" id="durTime">00:00</text>
                                <text x="18%" y="55%" id="curTime">00:00</text>
                          </g>
                        </svg>
                </div>
        <divclass="lrcShow" data-lrc='花开盛世'></div>
</div>

<script type="text/javascript">

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))

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 pics = [

"https://pic1.imgdb.cn/item/67667728d0e0a243d4e7a047.gif",
"https://pic1.imgdb.cn/item/67667708d0e0a243d4e79fed.gif",
"https://pic1.imgdb.cn/item/676676efd0e0a243d4e79fa9.gif",
"https://pic1.imgdb.cn/item/676676d0d0e0a243d4e79f55.gif",
"https://pic1.imgdb.cn/item/66c87823d9c307b7e987195b.jpg",
"https://pic1.imgdb.cn/item/66b503ecd9c307b7e98d30c0.jpg",

];

function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 1080 730`});
pics.forEach((pic, idx) => {
        let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
        let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1080, 'height':730, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
        let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
沁园春·雪 - 黑鸭子
词：毛泽东
北国风光
千里冰封
万里雪飘
万里雪飘
望长城内外
惟余莽莽
大河上下顿失滔滔
山舞银蛇
原驰腊象
欲与天公试比高
须晴日
看红装素裹
分外妖娆
江山如此多娇
引无数英雄竟折腰
江山如此多娇
引无数英雄竟折腰
惜秦皇汉武
略输文采
唐宗宋祖稍逊风骚
一代天骄成吉思汗
只识弯弓射大雕
只识弯弓射大雕
俱往矣
数风流人物 还看今朝
数风流人物 还看今朝
数风流人物
还看今朝
还看今朝

`;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
       
        audioURL:'https://cccimg.com/view.php/74d32de8c310a10477b1645524231d8b.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
        //        格式化时间数据
        let formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
        //        计算/设置控制路径有关的数据
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
        fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        //        在 timeupdate 事件处理中添加与控制路径有关的处理
        lrcPlayer.mObj.addEventListener('timeupdate', function() {
                let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
                fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
                durTime.textContent = formatTime(lrcPlayer.mObj.duration);
                curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
        });
        //      动态元素监测
      let runState = () => {
                lrcPlayer.mObj.paused
                        ? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations(), pic.stop())
                        : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations(), pic.play());
      }
        //        SVG viewBox 与 实际尺寸的比值
        let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
        let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
        //console.log(factorX, factorY);
        //        歌曲进度条鼠标移动处理
        let seeking = false;
        let moveEventProc = (event)        =>        {
                if(!seeking)        return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / bgcLen;
                let chkTime = lrcPlayer.mObj.duration * chkVal;
                fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

                let fIdx = false;
                lrcPlayer.lrcVec.forEach((lrc,idx) => {
                        if(!fIdx && lrc.seconds >= chkTime )        {
                                fIdx = !fIdx; lrcPlayer.idx = idx;
                                lrcPlayer.mObj.currentTime = chkTime;
                                return fIdx;
                        }
                });
        };
       
        fgc.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        fgc.onclick = bgc.onclick = (event) => seeking = !seeking;                

        //        歌曲、歌词 及 动态元素 启/停控制
        mCtrl.onclick = () => {
                lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
        }
        lrcPlayer.mObj.addEventListener('play', () => runState());
        lrcPlayer.mObj.addEventListener('pause', () => runState());
        lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>

红影 发表于 2025-1-16 20:13

学得很好{:4_187:}

红影 发表于 2025-1-16 20:14

很喜欢的意境，太美了{:4_187:}

红影 发表于 2025-1-16 20:17

天公岂敢与我试比高，主席的词非常大气磅礴。{:4_204:}

红影 发表于 2025-1-16 20:24

欣赏杨帆好帖{:4_199:}

秋思梦景 发表于 2025-1-16 21:01

问候老师好！精美音画佳作，精心制作分享！为您加分点赞！{:5_108:}{:5_116:}{:4_204:}

起个网名好难 发表于 2025-1-16 22:29

本帖最后由 起个网名好难 于 2025-1-16 22:30 编辑

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif


这一行有混入的乱码。
@import url(<a href="https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css" target="_blank">https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css</a>);

杨帆 发表于 2025-1-16 23:25

红影 发表于 2025-1-16 20:13
学得很好

谢谢鼓励，一起学习，共同进步{:4_204:}

杨帆 发表于 2025-1-16 23:26

秋思梦景 发表于 2025-1-16 21:01
问候老师好！精美音画佳作，精心制作分享！为您加分点赞！

谢谢梦景友友支持与鼓励，祝开心{:4_191:}

杨帆 发表于 2025-1-16 23:29

起个网名好难 发表于 2025-1-16 22:29
这一行有混入的乱码。
@import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);

@起个网名好难 老师好，在您原贴代码基础上，加了一个动图，请老师把它控制住，谢谢老师{:4_176:}

起个网名好难 发表于 2025-1-17 07:55

杨帆 发表于 2025-1-16 23:29
@起个网名好难 老师好，在您原贴代码基础上，加了一个动图，请老师把它控制住，谢谢老师

<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
        /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.9em 华文中宋;
                        pointer-events:none;position:absolute;
                        left:28%;bottom: 4%;
                        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:HSLA(350, 50%, 50%, 90%);
        }

        #oBlk        {
                width:1080px;height:720px; position: relative; margin:90px 0 40px calc(50% - 621px);
                background: #ccc ;
                padding:16px;
                overflow:hidden;
                border-radius:32px;
                box-shadow:3px 3px 6px darkgray;
        }
        #showSVG        {position:absolute; left:0px;top:0px;width:100%;height:110%;}
    #processMeter        {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
    #mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
    @keyframes rot{to{transform: rotate(1turn)}}
    #pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px; mix-blend-mode: screen;}
</style>

<div id="oBlk">
<img id="pic" src="https://pic1.imgdb.cn/item/66b5074cd9c307b7e98f80c2.gif" alt="" />
<div id="showSVG"></div>
<div id="processMeter">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
      <defs>
      <clipPath id="clip">
          <circle cx="100" cy="50" r="35" /></clilpPath>
      </defs>
      <image xlink:href="https://pic1.imgdb.cn/item/668809bad9c307b7e9768059.png" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
      <g fill='none' stroke-width='5'>
      <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="lightgray" id="bgc"></path>
      <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="#FF1493" id="fgc"></path>
      </g>
      <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
      <text x="82%" y="55%" id="durTime">00:00</text>
      <text x="18%" y="55%" id="curTime">00:00</text></g>
    </svg>
</div>
<div class="lrcShow" data-lrc='花开盛世'></div>
</div>
<script type="text/javascript">
//--------------------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//----------------------------------------------------------------------------
   
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 pics = [
"https://pic1.imgdb.cn/item/67667728d0e0a243d4e7a047.gif",
"https://pic1.imgdb.cn/item/67667708d0e0a243d4e79fed.gif",
"https://pic1.imgdb.cn/item/676676efd0e0a243d4e79fa9.gif",
"https://pic1.imgdb.cn/item/676676d0d0e0a243d4e79f55.gif",
"https://pic1.imgdb.cn/item/66c87823d9c307b7e987195b.jpg",
"https://pic1.imgdb.cn/item/66b503ecd9c307b7e98d30c0.jpg",
];

function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 1080 730`});
pics.forEach((pic, idx) => {
        let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
        let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1080, 'height':730, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
        let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
沁园春·雪 - 黑鸭子
词：毛泽东
北国风光
千里冰封
万里雪飘
万里雪飘
望长城内外
惟余莽莽
大河上下顿失滔滔
山舞银蛇
原驰腊象
欲与天公试比高
须晴日
看红装素裹
分外妖娆
江山如此多娇
引无数英雄竟折腰
江山如此多娇
引无数英雄竟折腰
惜秦皇汉武
略输文采
唐宗宋祖稍逊风骚
一代天骄成吉思汗
只识弯弓射大雕
只识弯弓射大雕
俱往矣
数风流人物 还看今朝
数风流人物 还看今朝
数风流人物
还看今朝
还看今朝
`;

var opts = {
        lrcTxt:lrc,
        //        歌曲MP3链接放这里
        audioURL:'https://cccimg.com/view.php/74d32de8c310a10477b1645524231d8b.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
        //        格式化时间数据
        let formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
        //        计算/设置控制路径有关的数据
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
        fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        //        在 timeupdate 事件处理中添加与控制路径有关的处理
        lrcPlayer.mObj.addEventListener('timeupdate', function() {
                let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
                fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
                durTime.textContent = formatTime(lrcPlayer.mObj.duration);
                curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
        });
        //        动态元素监测
        let runState = () => {
                lrcPlayer.mObj.paused
                        ? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations(), pic.stop())
                        : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations(), pic.play());
        }
        //        SVG viewBox 与 实际尺寸的比值
        let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
        let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
        //        歌曲进度条鼠标移动处理
        let seeking = false;
        let moveEventProc = (event)        =>        {
                if(!seeking)        return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / bgcLen;
                let chkTime = lrcPlayer.mObj.duration * chkVal;
                fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

                let fIdx = false;
                lrcPlayer.lrcVec.forEach((lrc,idx) => {
                        if(!fIdx && lrc.seconds >= chkTime )        {
                                fIdx = !fIdx; lrcPlayer.idx = idx;
                                lrcPlayer.mObj.currentTime = chkTime;
                                return fIdx;
                        }
                });
        };
       
        fgc.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        fgc.onclick = bgc.onclick = (event) => seeking = !seeking;                

        //        歌曲、歌词 及 动态元素 启/停控制
        mCtrl.onclick = () => {
                lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
        }
        lrcPlayer.mObj.addEventListener('play', () => runState());
        lrcPlayer.mObj.addEventListener('pause', () => runState());
        lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>

梦江南 发表于 2025-1-17 08:32

欣赏老师的好制作，这雪加得真好。{:4_199:}

红影 发表于 2025-1-17 13:10

杨帆 发表于 2025-1-16 23:25
谢谢鼓励，一起学习，共同进步

问好杨帆，周末快乐{:4_187:}

杨帆 发表于 2025-1-17 16:14

起个网名好难 发表于 2025-1-17 07:55

哈哈，雪花虽美，但也不可肆意任性，在难难老师手下终于学乖了！谢谢难难老师，您辛苦了！{:4_187:}

查看完整版本: 《沁园春·雪》- 学习难难老师贴《白狐》