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

杨帆

红影

学得很好

红影

很喜欢的意境，太美了

红影

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

红影

欣赏杨帆好帖

秋思梦景

问候老师好！精美音画佳作，精心制作分享！为您加分点赞！

起个网名好难

                               
登录/注册后可看大图

这一行有混入的乱码。
@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 20:13
学得很好

谢谢鼓励，一起学习，共同进步

杨帆

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

谢谢梦景友友支持与鼓励，祝开心

杨帆

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

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

起个网名好难

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

1. <style type="text/css">
   
2. @import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
   
3.         /**        不满意一般设置也可以调整下                */
   
4.         .lrcShow {
   
5.                         font: normal 2.9em 华文中宋;
   
6.                         pointer-events:none;position:absolute;
   
7.                         left:28%;bottom: 4%;
   
8.                         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);
   
9. 
   
10.         }
    
11.       .lrcShow::before {
    
12.                         color:HSLA(350, 50%, 50%, 90%);
    
13.         }
    
14. 
    
15.         #oBlk        {
    
16.                 width:1080px;height:720px; position: relative; margin:90px 0 40px calc(50% - 621px);
    
17.                 background: #ccc ;
    
18.                 padding:16px;
    
19.                 overflow:hidden;
    
20.                 border-radius:32px;
    
21.                 box-shadow:3px 3px 6px darkgray;
    
22.         }
    
23.         #showSVG        {position:absolute; left:0px;top:0px;width:100%;height:110%;}
    
24.     #processMeter        {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
    
25.     #mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
    
26.     @keyframes rot{to{transform: rotate(1turn)}}
    
27.     #pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px; mix-blend-mode: screen;}
    
28. </style>
    
29. 
    
30. <div id="oBlk">
    
31.   <img id="pic" src="https://pic1.imgdb.cn/item/66b5074cd9c307b7e98f80c2.gif" alt="" />
    
32.   <div id="showSVG"></div>
    
33.   <div id="processMeter">
    
34.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
    
35.       <defs>
    
36.         <clipPath id="clip">
    
37.           <circle cx="100" cy="50" r="35" /></clilpPath>
    
38.       </defs>
    
39.       <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" />
    
40.       <g fill='none' stroke-width='5'>
    
41.         <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="lightgray" id="bgc"></path>
    
42.         <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="#FF1493" id="fgc"></path>
    
43.       </g>
    
44.       <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
    
45.         <text x="82%" y="55%" id="durTime">00:00</text>
    
46.         <text x="18%" y="55%" id="curTime">00:00</text></g>
    
47.     </svg>
    
48.   </div>
    
49.   <div class="lrcShow" data-lrc='花开盛世'></div>
    
50. </div>
    
51. <script type="text/javascript">
    
52. //--------------------------------------------------------------------------
    
53. 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[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);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,{}))
    
54. //----------------------------------------------------------------------------
    
55.    
    
56. var sf0 = document.createElement('script');
    
57. sf0.type = 'text/javascript';
    
58. sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
    
59. sf0.charset = "utf-8";
    
60. document.body.appendChild(sf0);
    
61. 
    
62. sf0.onload = () => {
    
63. let pics = [
    
64. "https://pic1.imgdb.cn/item/67667728d0e0a243d4e7a047.gif",
    
65. "https://pic1.imgdb.cn/item/67667708d0e0a243d4e79fed.gif",
    
66. "https://pic1.imgdb.cn/item/676676efd0e0a243d4e79fa9.gif",
    
67. "https://pic1.imgdb.cn/item/676676d0d0e0a243d4e79f55.gif",
    
68. "https://pic1.imgdb.cn/item/66c87823d9c307b7e987195b.jpg",
    
69. "https://pic1.imgdb.cn/item/66b503ecd9c307b7e98d30c0.jpg",
    
70. ];
    
71. 
    
72. 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[key])}};if(parentNode)parentNode.appendChild(sObj);return sObj};
    
73. 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`});
    
74. pics.forEach((pic, idx) => {
    
75.         let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
    
76.         let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1080, 'height':730, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
    
77.         let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
    
78.         aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
    
79. });
    
80. showSVG.innerHTML = mysvg.outerHTML;
    
81. 
    
82. const lrc =`
    
83. [00:00.39]沁园春·雪 - 黑鸭子
    
84. [00:01.21]词：毛泽东
    
85. [00:31.27]北国风光
    
86. [00:39.78]千里冰封
    
87. [00:45.87]万里雪飘
    
88. [01:01.97]万里雪飘
    
89. [01:12.46]望长城内外
    
90. [01:16.40]惟余莽莽
    
91. [01:20.09]大河上下顿失滔滔
    
92. [01:31.72]山舞银蛇
    
93. [01:35.67]原驰腊象
    
94. [01:39.44]欲与天公试比高
    
95. [01:49.89]须晴日
    
96. [01:53.73]看红装素裹
    
97. [01:59.26]分外妖娆
    
98. [02:19.07]江山如此多娇
    
99. [02:27.24]引无数英雄竟折腰
    
100. [02:35.42]江山如此多娇
     
101. [02:43.60]引无数英雄竟折腰
     
102. [02:56.25]惜秦皇汉武
     
103. [03:00.22]略输文采
     
104. [03:04.53]唐宗宋祖稍逊风骚
     
105. [03:12.49]一代天骄成吉思汗
     
106. [03:23.82]只识弯弓射大雕
     
107. [03:32.68]只识弯弓射大雕
     
108. [03:43.03]俱往矣
     
109. [03:47.81]数风流人物 还看今朝
     
110. [03:50.22]数风流人物 还看今朝
     
111. [03:52.56]数风流人物
     
112. [03:54.08]还看今朝
     
113. [04:00.54]还看今朝
     
114. `;
     
115. 
     
116. var opts = {
     
117.         lrcTxt:lrc,
     
118.         //        歌曲MP3链接放这里
     
119.         audioURL:'https://cccimg.com/view.php/74d32de8c310a10477b1645524231d8b.mp3'
     
120. };
     
121. let lrcPlayer = new lrcPlayerY(opts);
     
122.         //        格式化时间数据
     
123.         let formatTime = (time) => {
     
124.                 let min = ('' + parseInt(time / 60)).padStart(2,'0');
     
125.                 let sec = ('' + parseInt(time % 60)).padStart(2,'0');
     
126.                 return (`${min}:${sec}`);
     
127.         };
     
128.         //        计算/设置控制路径有关的数据
     
129.         let circlePoints = [];
     
130.         let bgcLen = bgc.getTotalLength();
     
131.         fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
     
132.        
     
133.         for(let i = 0; i < bgcLen; i++)        {
     
134.                 circlePoints.push(bgc.getPointAtLength(i));
     
135.         }
     
136.         //        在 timeupdate 事件处理中添加与控制路径有关的处理
     
137.         lrcPlayer.mObj.addEventListener('timeupdate', function() {
     
138.                 let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
     
139.                 fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
     
140.                 durTime.textContent = formatTime(lrcPlayer.mObj.duration);
     
141.                 curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
     
142.         });
     
143.         //        动态元素监测
     
144.         let runState = () => {
     
145.                 lrcPlayer.mObj.paused
     
146.                         ? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations(), pic.stop())
     
147.                         : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations(), pic.play());
     
148.         }
     
149.         //        SVG viewBox 与 实际尺寸的比值
     
150.         let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
     
151.         let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
     
152.         //        歌曲进度条鼠标移动处理
     
153.         let seeking = false;
     
154.         let moveEventProc = (event)        =>        {
     
155.                 if(!seeking)        return;
     
156.                 let thePoint = 0, minV = 100;
     
157.                 circlePoints.forEach((point, idx ) => {
     
158.                         let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
     
159.                         let mv = mx*mx + my*my;
     
160.                         if(mv < minV)        {
     
161.                                 minV = mv; thePoint = idx;
     
162.                         }
     
163.                 })
     
164.                 let chkVal = thePoint / bgcLen;
     
165.                 let chkTime = lrcPlayer.mObj.duration * chkVal;
     
166.                 fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
     
167. 
     
168.                 let fIdx = false;
     
169.                 lrcPlayer.lrcVec.forEach((lrc,idx) => {
     
170.                         if(!fIdx && lrc.seconds >= chkTime )        {
     
171.                                 fIdx = !fIdx; lrcPlayer.idx = idx;
     
172.                                 lrcPlayer.mObj.currentTime = chkTime;
     
173.                                 return fIdx;
     
174.                         }
     
175.                 });
     
176.         };
     
177.        
     
178.         fgc.addEventListener("mousemove", (event) => moveEventProc(event));
     
179.         bgc.addEventListener("mousemove", (event) => moveEventProc(event));
     
180.         fgc.onclick = bgc.onclick = (event) => seeking = !seeking;                
     
181. 
     
182.         //        歌曲、歌词 及 动态元素 启/停控制
     
183.         mCtrl.onclick = () => {
     
184.                 lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
     
185.         }
     
186.         lrcPlayer.mObj.addEventListener('play', () => runState());
     
187.         lrcPlayer.mObj.addEventListener('pause', () => runState());
     
188.         lrcPlayer.mObj.play().catch(_ = () => runState());
     
189. }
     
190. </script>

复制代码

梦江南

欣赏老师的好制作，这雪加得真好。

红影

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

问好杨帆，周末快乐

杨帆

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

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