请教夕阳老师：如何控制这个动图、添加这个视频？[已解决]

杨帆

杨帆

@夕阳黄昏  夕阳老师您好：

在本地预览，除了动图控制不了，其余正常

不知为何发到论坛就全部失效了

请给于指导！由衷感谢~

杨帆

还有，歌词预览在左下，咋发在论坛就跑到了左上呢？

夕阳黄昏

杨帆 发表于 2024-12-1 13:05
@夕阳黄昏  夕阳老师您好：

在本地预览，除了动图控制不了，其余正常

此帖正常显示需要三部分代码： CSS、HTML 以及 js
而在此帖中没有 js 代码所以所有动态全部失效，CSS代码部分混入了多余的代码导致歌词跑到上面去了。

我估计发帖时没把本地代码全部拷上故缺失了全部的js代码。

另外，发帖步骤可能也存在问题。

杨帆

夕阳黄昏 发表于 2024-12-1 13:43
此帖正常显示需要三部分代码： CSS、HTML 以及 js
而在此帖中没有 js 代码所以所有动态全部失效，CSS代 ...

知道了，我再试试，谢谢夕阳老师

杨帆

还有一个问题请教：

为何在本地测试，用之前的办法也不能控制动态图呢？

该如何控制呢？谢谢夕阳老师@夕阳黄昏

夕阳黄昏

杨帆 发表于 2024-12-1 14:18
知道了，我再试试，谢谢夕阳老师

4#代码第二行 @import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);
应该是发帖时被破坏了，正确的是 @import rl(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
改正后大部分功能会正常。
这帖子的代码相对有些复杂，搞清楚各部分的作用还需要理顺它们之间的相互关系才能全部正常，这功夫大概和重新做一遍差不多。

杨帆

夕阳黄昏 发表于 2024-12-1 16:27
4#代码第二行 @import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);
应该是发帖时 ...

好的，知道了，谢谢老师

夕阳黄昏

没仔细琢磨，凑合着调整了一下

1. <style>
   
2. @import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
   
3. :root {--rState:running;}
   
4.         /**    不满意一般设置也可以调整下 **/
   
5.         
   
6. #papa {
   
7.     position: relative;
   
8.     width: 1400px;
   
9.     height:750px;
   
10.     background-color: #000000 ;
    
11.     overflow:hidden;
    
12.     margin: 130px 0 30px calc(50% - 780px);  
    
13.     box-shadow: 4px 4px 10px #000;
    
14.   }
    
15. 
    
16. #testImg{position: absolute;width:80%;height: 90%;z-index: 4;mix-blend-mode:darken; }
    
17.   
    
18.   .lrcShow {
    
19.      font:normal 3em 华文新魏;
    
20.      font-weight:200;
    
21.      color: #000080;
    
22.      white-space: pre;
    
23.      -webkit-background-clip: text;
    
24.      z-index:10;
    
25.      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px  0);
    
26. 
    
27.     }
    
28.    .lrcShow::before { position: absolute;width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre-webkit-background-clip: text;
    
29. 
    
30.     }
    
31.    
    
32.     zxx-slide {
    
33.     width: 100%;
    
34.     height: 100%;
    
35.     position: absolute;
    
36.   }
    
37.   .zxx-slide-a {
    
38.     position: absolute;
    
39.     cursor: default;
    
40.     pointer-events:none;
    
41.   }
    
42.   .zxx-slide-a.in {
    
43.     z-index: 1;
    
44.     animation-duration: 2s;
    
45.     animation-name: tilt-in-fwd-tr;
    
46.     transition: 1s;
    
47.   }
    
48.   .zxx-slide-img {
    
49.     width: 100%;
    
50.     height: 100%;
    
51.   }
    
52. /**
    
53. * ----------------------------------------
    
54. * animation tilt-in-fwd-tr
    
55. * ----------------------------------------
    
56. */
    
57. @keyframes tilt-in-fwd-tr {
    
58.   0% {transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    
59.     opacity: 0;
    
60.   }
    
61.   100% {transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    
62.     opacity: 1;
    
63.   }
    
64. }
    
65. #processMeter{
    
66.   position: absolute; right:1%; bottom:6%; width: 200px; height:100px; z-index:5;}
    
67. #mPlayer{transform-origin:50%;cursor: pointer;animation: rot 5s linear infinite var(--rState);}
    
68.   @keyframes rot {to {transform:rotate(1turn)}}
    
69. 
    
70. #fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em  华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
    
71. 
    
72. </style>
    
73. <div id="papa">
    
74.   <img id="testImg" src="https://xlaj.cn/upfile/202411/27/fn.gif" style="top:30px; left:200px;" />
    
75. 
    
76.   <zxx-slide>
    
77.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660941589f345e8d038131b5.jpg"> </a>
    
78.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52abd.jpg"></a>
    
79.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
    
80.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946239f345e8d03a6afeb.jpg"></a>
    
81.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a535bb.jpg."></a>
    
82.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a531e6.jpg"></a>
    
83.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946229f345e8d03a6accb.jpg"></a>
    
84.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/66095b059f345e8d03546b8e.jpg"></a>
    
85.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
    
86.   </zxx-slide>
    
87.     <div id="processMeter">
    
88.         <svg stroke-width="5" viewBox="0 0 200 100" id="svgObj">
    
89.             <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"  fill="none" ></path>
    
90.             <path
    
91.               class="process-circle"
    
92.               d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
    
93.               stroke="darkred"
    
94.               fill="none"
    
95.               stroke-dasharray="455"
    
96.               stroke-dashoffset="455"
    
97.             ></path>
    
98.             <defs>
    
99.                 <clipPath id="clip">
    
100.                     <circle cx="100" cy="50" r="41" />
     
101.                 </clilpPath>
     
102.             </defs>
     
103.             <image xlink:href="https://pic.imgdb.cn/item/6723214fd29ded1a8cfe28f1.png" id="mPlayer" width="95" height='95' x="50" y="0" clip-path="url(#clip)" preserveAspectRatio="none" />
     
104.             <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
     
105.             <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
     
106.         </svg>   
     
107.     </div>
     
108. <div class="lrcShow" data-lrc="牧羊曲" >牧羊曲</div>
     
109. 
     
110. <span id="fullscreen">全屏观赏</span>
     
111. 
     
112. </div>
     
113. <script>
     
114.     const processCircle = document.querySelector('.process-circle');
     
115.     // 获取圆的周长
     
116.     const circumference = processCircle.getTotalLength();
     
117.     // 把周长赋值给 strokeDasharray
     
118.     processCircle.style.strokeDasharray = circumference;
     
119.    
     
120.     function setProcessCircle(percent = 0) {
     
121.         // 动态计算 offset 赋值给 strokeDashoffset
     
122.         // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
     
123.         processCircle.style.strokeDashoffset =
     
124.           circumference * (1 - parseInt(percent) / 100)
     
125.     }   
     
126. var sf0 = document.createElement('script');
     
127. sf0.type = 'text/javascript';
     
128. sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
     
129. sf0.charset = "utf-8";
     
130. document.body.appendChild(sf0);
     
131. 
     
132. sf0.onload = () => {
     
133. let lrctxt = `
     
134. [offset:0]
     
135. [00:00.00]牧羊曲 - 郑绪岚
     
136. [00:07.75]词：王立平
     
137. [00:15.51]曲：王立平
     
138. [00:23.27]日出嵩山坳
     
139. [00:26.55]
     
140. [00:29.82]晨钟惊飞鸟
     
141. [00:32.73]
     
142. [00:36.50]林间小溪水潺潺
     
143. [00:42.56]
     
144. [00:44.32]坡上青青草
     
145. [00:47.69]
     
146. [00:49.76]野果香山花俏
     
147. [00:55.71]
     
148. [00:59.75]狗儿跳羊儿跑
     
149. [01:04.06]
     
150. [01:06.43]举起鞭儿轻轻摇
     
151. [01:12.43]
     
152. [01:16.43]小曲满山飘满山飘
     
153. [01:22.58]
     
154. [01:49.97]莫道女儿娇
     
155. [01:52.86]
     
156. [01:56.75]无暇有奇巧
     
157. [01:59.50]
     
158. [02:03.39]冬去春来十六载
     
159. [02:09.40]
     
160. [02:11.29]黄花正年少
     
161. [02:14.20]
     
162. [02:16.63]腰身壮胆气豪
     
163. [02:22.82]
     
164. [02:26.68]常练武勤操劳
     
165. [02:31.12]
     
166. [02:33.39]耕田放牧打豺狼
     
167. [02:39.37]
     
168. [02:43.30]风雨一肩挑一肩挑
     
169. [02:49.41]
     
170. [02:51.63]风雨一肩挑一肩挑
     
171. [02:57.72]
     
172. [03:01.92]一肩挑
     
173.     `;
     
174.     let opts = {
     
175.         lrcTxt: lrctxt,
     
176.         audioURL: "https://file.uhsea.com/2411/084853c28b242814a04e290ed762dd8c1V.mp3",
     
177.     }
     
178.     let player = new lrcPlayerY(opts);
     
179.        
     
180.     let circlePoints = [];
     
181.     let bgcLen = bgc.getTotalLength();
     
182. 
     
183.     for (let i = 0; i < bgcLen; i++) {
     
184.         circlePoints.push(bgc.getPointAtLength(i));
     
185.     }
     
186.     //console.log(circlePoints);
     
187. 
     
188.     var eleZxxSlides = document.querySelectorAll('zxx-slide');
     
189.         [].slice.call(eleZxxSlides).forEach(function(container) {
     
190.         var timerSlide = null;
     
191.         var indexSlide = 0;
     
192. 
     
193.         // 对应的元素
     
194.         var eleSlides = [].slice.call(container.querySelectorAll('a'));
     
195.         var eleButtons = [].slice.call(container.querySelectorAll('button'));
     
196.         var funSlide = function() {
     
197.             eleSlides.forEach(function(slide, index) {
     
198.                 if (!player.mObj.paused) {
     
199.                     if (indexSlide == index) {
     
200.                         slide.classList.add('in');
     
201.                     } else if (slide.classList.contains('in')) {
     
202.                         slide.classList.remove('in');
     
203.                     }
     
204.                 }
     
205.             });
     
206.             timerSlide = setTimeout(function() {
     
207.                 indexSlide++;
     
208.                 if (indexSlide == eleSlides.length) {
     
209.                     indexSlide = 0;
     
210.                 }
     
211.                 funSlide();
     
212.             },
     
213.             12000);
     
214.         }
     
215.         indexSlide++;
     
216.         setTimeout(funSlide, 12000);
     
217.     });
     
218.     let formatTime = (time) => {
     
219.         let str = '';
     
220.         let min = parseInt(time / 60);
     
221.         let sec = parseInt(time % 60);
     
222.         return ((min < 10 ? '0' + min: min) + ":" + (sec < 10 ? '0' + sec: sec));
     
223.     };
     
224.     player.mObj.addEventListener('timeupdate',    function() {
     
225.         let processValue = player.mObj.currentTime / player.mObj.duration;
     
226.         processCircle.style.strokeDashoffset = circumference * (1 - processValue);
     
227.         durTime.textContent = formatTime(player.mObj.duration);
     
228.         curTime.textContent = formatTime(player.mObj.currentTime);
     
229.     });
     
230.        
     
231.     mPlayer.onclick = () => {
     
232.         player.mObj.paused ? (mPlayer.style.setProperty('--rState', 'running'), player.mObj.play()) : (mPlayer.style.setProperty('--rState', 'paused'), player.mObj.pause());
     
233.     }
     
234. 
     
235.     let seeking = false;
     
236.     let moveEventProc = (event) => {
     
237.         if (!seeking) return;
     
238.         let thePoint = 0,
     
239.         minV = 100;
     
240.         circlePoints.forEach((point, idx) => {
     
241.             let mx = (point.x - event.offsetX),  my = (point.y - event.offsetY) ;
     
242.                         let mv = mx * mx + my * my;
     
243.             if (mv < minV) {
     
244.                 minV = mv;
     
245.                 thePoint = idx;
     
246.             }
     
247.         });
     
248.                 let chkVal = thePoint / circumference;
     
249.         let chkTime = player.mObj.duration * chkVal;
     
250.         processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
     
251.         for (i = 0; i < player.lrcVec.length; i++) {
     
252.             if (player.lrcVec.seconds >= chkTime) {
     
253.                 //console.log(player.lrcVec.seconds, i);
     
254.                 player.idx = i;
     
255.                 player.mObj.currentTime = chkTime;
     
256.                 break;
     
257.             }
     
258.         };
     
259.     };
     
260.     processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
     
261.     bgc.addEventListener("mousemove", (event) => moveEventProc(event));
     
262.     processCircle.onclick = bgc.onclick = () => seeking = !seeking;
     
263. 
     
264. 
     
265.         let fs = true;
     
266.         fullscreen.onclick = () => {
     
267.                 fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
     
268.                 fs = !fs;
     
269.         };
     
270. 
     
271.         var mState = () => {
     
272.                 papa.style.setProperty('--state', ['running', 'paused'][ + player.mObj.paused]);
     
273.                 player.mObj.paused ? image0.stop() : image0.play();
     
274.         };
     
275.         player.mObj.oncanplay = player.mObj.onplaying = player.mObj.onpause = () => mState();
     
276.         mPlayer.onclick = () => player.mObj.paused ? player.mObj.play() : player.mObj.pause();
     
277.         mPlayer.style.animationPlayState = player.mObj.paused ? 'paused': 'running';
     
278.         player.mObj.addEventListener('playing', () => mPlayer.style.animationPlayState = 'running');
     
279.         player.mObj.addEventListener('pause', () => mPlayer.style.animationPlayState = 'paused');
     
280. 
     
281.         //        控制图片的代码
     
282.         if ('getContext' in document.createElement('canvas')) {
     
283.                 HTMLImageElement.prototype.play = function() {
     
284.                         if (this.storeCanvas) {
     
285.                                 // 移除存储的canvas
     
286.                                 this.storeCanvas.parentElement.removeChild(this.storeCanvas);
     
287.                                 this.storeCanvas = null;
     
288.                                 // 透明度还原
     
289.                                 this.style.opacity = '';
     
290.                         }
     
291.                         if (this.storeUrl) {
     
292.                                 this.src = this.storeUrl;
     
293.                         }
     
294.                 };
     
295.                 HTMLImageElement.prototype.stop = function() {
     
296.                         var canvas = document.createElement('canvas');
     
297.                         // 尺寸
     
298.                         var width = this.width,
     
299.                         height = this.height;
     
300.                         if (width && height) {
     
301.                                 // 存储之前的地址
     
302.                                 if (!this.storeUrl) {
     
303.                                         this.storeUrl = this.src;
     
304.                                 }
     
305.                                 // canvas大小
     
306.                                 canvas.width = width;
     
307.                                 canvas.height = height;
     
308.                                 // 绘制图片帧（第一帧）
     
309.                                 canvas.getContext('2d').drawImage(this, 0, 0, width, height);
     
310.                                 // 重置当前图片
     
311.                                 try {
     
312.                                         this.src = canvas.toDataURL("image/gif");
     
313.                                 } catch(e) {
     
314.                                         // 跨域
     
315.                                         this.removeAttribute('src');
     
316.                                         // 载入canvas元素
     
317.                                         canvas.style.position = 'absolute';
     
318.                                         // 前面插入图片
     
319.                                         this.parentElement.insertBefore(canvas, this);
     
320.                                         // 隐藏原图
     
321.                                         this.style.opacity = '0';
     
322.                                         // 存储canvas
     
323.                                         this.storeCanvas = canvas;
     
324.                                 }
     
325.                         }
     
326.                 };
     
327.         }
     
328.         var image0 = document.getElementById("testImg");
     
329. }
     
330. </script>
     

复制代码

杨帆

夕阳老师好，此帖是学习您的《北京的秋天》，不清楚加入gif动图后为何就控制不了呢？@夕阳黄昏

杨帆

夕阳黄昏 发表于 2024-12-1 18:22
没仔细琢磨，凑合着调整了一下

哇，夕阳老师您太强大了！折腾我几天的两只小鸟终于被搞定了！

只知道代码调整好多，但不清楚是否具有普适性？

无论如何，由衷感谢老师，因今晚我终于可以睡个好觉了@夕阳黄昏

杨帆

老师您好@夕阳黄昏   加了个视频，发现小播不能点击了呀，咋整呢？谢谢

夕阳黄昏

杨帆 发表于 2024-12-1 21:14
老师您好@夕阳黄昏   加了个视频，发现小播不能点击了呀，代码见楼上，咋整呢？谢谢

至少第二行又出老毛病了

发帖的步骤：高级模式 --> 纯文本 --> 附件选项 --> HTML 代码 --> 禁用链接识别 --> 填写帖子名称 --> 粘贴帖子代码 --> 发表帖子

按这个步骤来，正确的代码是不会出错的。

夕阳黄昏

杨帆 发表于 2024-12-1 21:14
老师您好@夕阳黄昏   加了个视频，发现小播不能点击了呀，代码见楼上，咋整呢？谢谢

几个问题：
1. 第二行 老毛病，有了昨天的经验一眼就看出来了；
2. 84行 z-indx：1660, 这个也太大了，就是它的原因导致控制失灵（被遮挡住了）；
3. 飞鸟动态图片好像是私人所有，不希望别人使用，现在链接也失效了；
4. 如果只是为了展示帖子，建议使用马黑现成的封装好的代码，功能全还不易出问题。

夕阳黄昏

1. <style>
   
2. @import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
   
3. :root {--rState:running;}
   
4.         /**    不满意一般设置也可以调整下 **/
   
5.         
   
6. #papa {
   
7.     position: relative;
   
8.     width: 1400px;
   
9.     height:750px;
   
10.     background-color: #000000 ;
    
11.     overflow:hidden;
    
12.     margin: 130px 0 30px calc(50% - 780px);  
    
13.     box-shadow: 4px 4px 10px #000;
    
14.   }
    
15. 
    
16. #vid2 {
    
17.     position: absolute;
    
18.     left:0px;
    
19.     bottom:0px;
    
20.     width: 100%;
    
21.     height:calc(100% + 100px);
    
22.     mix-blend-mode:screen;
    
23.     opacity: 0.8;   
    
24.     object-fit: cover;
    
25.     z-index:8;
    
26. }
    
27. 
    
28. #testImg{position: absolute;width:80%;height: 90%;z-index: 4;mix-blend-mode:darken; }
    
29.   
    
30.   .lrcShow {
    
31.      font:normal 3em 华文新魏;
    
32.      font-weight:200;
    
33.      color: #000080;
    
34.      white-space: pre;
    
35.      cursor: none; ;pointer-events: none;
    
36.      -webkit-background-clip: text;
    
37.      z-index:10;
    
38.      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px  0);
    
39. 
    
40.     }
    
41.    .lrcShow::before { position: absolute;width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre-webkit-background-clip: text;
    
42. 
    
43.     }
    
44.    
    
45.     zxx-slide {
    
46.     width: 100%;
    
47.     height: 100%;
    
48.     position: absolute;
    
49.   }
    
50.   .zxx-slide-a {
    
51.     position: absolute;
    
52.     cursor: default;
    
53.     pointer-events:none;
    
54.   }
    
55.   .zxx-slide-a.in {
    
56.     z-index: 1;
    
57.     animation-duration: 2s;
    
58.     animation-name: tilt-in-fwd-tr;
    
59.     transition: 1s;
    
60.   }
    
61.   .zxx-slide-img {
    
62.     width: 100%;
    
63.     height: 100%;
    
64.   }
    
65. /**
    
66. * ----------------------------------------
    
67. * animation tilt-in-fwd-tr
    
68. * ----------------------------------------
    
69. */
    
70. @keyframes tilt-in-fwd-tr {
    
71.   0% {transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    
72.     opacity: 0;
    
73.   }
    
74.   100% {transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    
75.     opacity: 1;
    
76.   }
    
77. }
    
78. #processMeter{
    
79.   position: absolute; right:1%; bottom:6%; width: 200px; height:100px; z-index:55;}
    
80. 
    
81. #mCtrl{transform-origin:50%; cursor: pointer;pointer-events:auto;animation: rot 5s linear infinite var(--rState);}
    
82.   @keyframes rot {to {transform:rotate(1turn)}}
    
83. 
    
84. #fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em  华文新魏; opacity: 1; cursor: pointer; z-index: 10}
    
85. 
    
86. </style>
    
87. <div id="papa">
    
88.   <img id="testImg" src="https://xlaj.cn/upfile/202411/27/fn.gif" style="top:30px; left:200px;" />
    
89. <video id="vid2" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp4" autoplay loop muted></video>
    
90. 
    
91.   <zxx-slide>
    
92.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660941589f345e8d038131b5.jpg"> </a>
    
93.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52abd.jpg"></a>
    
94.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
    
95.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946239f345e8d03a6afeb.jpg"></a>
    
96.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a535bb.jpg."></a>
    
97.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a531e6.jpg"></a>
    
98.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946229f345e8d03a6accb.jpg"></a>
    
99.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/66095b059f345e8d03546b8e.jpg"></a>
    
100.     <a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
     
101.   </zxx-slide>
     
102.     <div id="processMeter">
     
103.         <svg stroke-width="5" viewBox="0 0 200 100" id="svgObj">
     
104.             <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"  fill="none" ></path>
     
105.             <path
     
106.               class="process-circle"
     
107.               d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
     
108.               stroke="darkred"
     
109.               fill="none"
     
110.               stroke-dasharray="455"
     
111.               stroke-dashoffset="455"
     
112.             ></path>
     
113.             <defs>
     
114.                 <clipPath id="clip">
     
115.                     <circle cx="100" cy="50" r="41" />
     
116.                 </clilpPath>
     
117.             </defs>
     
118.             <image xlink:href="https://pic.imgdb.cn/item/6723214fd29ded1a8cfe28f1.png" id="mCtrl" width="95" height='95' x="50" y="0" clip-path="url(#clip)" preserveAspectRatio="none" />
     
119.             <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
     
120.             <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
     
121.         </svg>   
     
122.     </div>
     
123. <div class="lrcShow" data-lrc="牧羊曲" >牧羊曲</div>
     
124. 
     
125. <span id="fullscreen">全屏观赏</span>
     
126. 
     
127. </div>
     
128. <script>
     
129.     const processCircle = document.querySelector('.process-circle');
     
130.     // 获取圆的周长
     
131.     const circumference = processCircle.getTotalLength();
     
132.     // 把周长赋值给 strokeDasharray
     
133.     processCircle.style.strokeDasharray = circumference;
     
134.    
     
135.     function setProcessCircle(percent = 0) {
     
136.         // 动态计算 offset 赋值给 strokeDashoffset
     
137.         // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
     
138.         processCircle.style.strokeDashoffset =
     
139.           circumference * (1 - parseInt(percent) / 100)
     
140.     }   
     
141. var sf0 = document.createElement('script');
     
142. sf0.type = 'text/javascript';
     
143. sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
     
144. sf0.charset = "utf-8";
     
145. document.body.appendChild(sf0);
     
146. 
     
147. sf0.onload = () => {
     
148. let lrctxt = `
     
149. [offset:0]
     
150. [00:00.00]牧羊曲 - 郑绪岚
     
151. [00:07.75]词：王立平
     
152. [00:15.51]曲：王立平
     
153. [00:23.27]日出嵩山坳
     
154. [00:26.55]
     
155. [00:29.82]晨钟惊飞鸟
     
156. [00:32.73]
     
157. [00:36.50]林间小溪水潺潺
     
158. [00:42.56]
     
159. [00:44.32]坡上青青草
     
160. [00:47.69]
     
161. [00:49.76]野果香山花俏
     
162. [00:55.71]
     
163. [00:59.75]狗儿跳羊儿跑
     
164. [01:04.06]
     
165. [01:06.43]举起鞭儿轻轻摇
     
166. [01:12.43]
     
167. [01:16.43]小曲满山飘满山飘
     
168. [01:22.58]
     
169. [01:49.97]莫道女儿娇
     
170. [01:52.86]
     
171. [01:56.75]无暇有奇巧
     
172. [01:59.50]
     
173. [02:03.39]冬去春来十六载
     
174. [02:09.40]
     
175. [02:11.29]黄花正年少
     
176. [02:14.20]
     
177. [02:16.63]腰身壮胆气豪
     
178. [02:22.82]
     
179. [02:26.68]常练武勤操劳
     
180. [02:31.12]
     
181. [02:33.39]耕田放牧打豺狼
     
182. [02:39.37]
     
183. [02:43.30]风雨一肩挑一肩挑
     
184. [02:49.41]
     
185. [02:51.63]风雨一肩挑一肩挑
     
186. [02:57.72]
     
187. [03:01.92]一肩挑
     
188.     `;
     
189.     let opts = {
     
190.         lrcTxt: lrctxt,
     
191.         audioURL: "https://file.uhsea.com/2411/084853c28b242814a04e290ed762dd8c1V.mp3",
     
192.     }
     
193.     let player = new lrcPlayerY(opts);
     
194.         
     
195.     let circlePoints = [];
     
196.     let bgcLen = bgc.getTotalLength();
     
197. 
     
198.     for (let i = 0; i < bgcLen; i++) {
     
199.         circlePoints.push(bgc.getPointAtLength(i));
     
200.     }
     
201.     //console.log(circlePoints);
     
202. 
     
203.     var eleZxxSlides = document.querySelectorAll('zxx-slide');
     
204.         [].slice.call(eleZxxSlides).forEach(function(container) {
     
205.         var timerSlide = null;
     
206.         var indexSlide = 0;
     
207. 
     
208.         // 对应的元素
     
209.         var eleSlides = [].slice.call(container.querySelectorAll('a'));
     
210.         var eleButtons = [].slice.call(container.querySelectorAll('button'));
     
211.         var funSlide = function() {
     
212.             eleSlides.forEach(function(slide, index) {
     
213.                 if (!player.mObj.paused) {
     
214.                     if (indexSlide == index) {
     
215.                         slide.classList.add('in');
     
216.                     } else if (slide.classList.contains('in')) {
     
217.                         slide.classList.remove('in');
     
218.                     }
     
219.                 }
     
220.             });
     
221.             timerSlide = setTimeout(function() {
     
222.                 indexSlide++;
     
223.                 if (indexSlide == eleSlides.length) {
     
224.                     indexSlide = 0;
     
225.                 }
     
226.                 funSlide();
     
227.             },
     
228.             12000);
     
229.         }
     
230.         indexSlide++;
     
231.         setTimeout(funSlide, 12000);
     
232.     });
     
233.     let formatTime = (time) => {
     
234.         let str = '';
     
235.         let min = parseInt(time / 60);
     
236.         let sec = parseInt(time % 60);
     
237.         return ((min < 10 ? '0' + min: min) + ":" + (sec < 10 ? '0' + sec: sec));
     
238.     };
     
239.     player.mObj.addEventListener('timeupdate',    function() {
     
240.         let processValue = player.mObj.currentTime / player.mObj.duration;
     
241.         processCircle.style.strokeDashoffset = circumference * (1 - processValue);
     
242.         durTime.textContent = formatTime(player.mObj.duration);
     
243.         curTime.textContent = formatTime(player.mObj.currentTime);
     
244.     });
     
245.       
     
246.     mCtrl.addEventListener('click', () => {
     
247.         console.log('mCtrl cliecked !');
     
248.         player.mObj.paused ? (mCtrl.style.setProperty('--rState', 'running'), player.mObj.play()) : (mCtrl.style.setProperty('--rState', 'paused'), player.mObj.pause());
     
249.     });
     
250.         var mState = () => {
     
251.                 papa.style.setProperty('--state', ['running', 'paused'][ + player.mObj.paused]);
     
252.                 player.mObj.paused ?  (vid2.pause(), image0.stop()) : (vid2.play(), image0.play());
     
253.                 };
     
254. 
     
255.         //player.mObj.oncanplay = player.mObj.onplaying = player.mObj.onpause = () => mState();
     
256.         //mCtrl.onclick = () => player.mObj.paused ? player.mObj.play() : player.mObj.pause();
     
257.         //mCtrl.style.animationPlayState = player.mObj.paused ? 'paused' : 'running';
     
258.         player.mObj.addEventListener('play', () => mState());
     
259.         player.mObj.addEventListener('pause', () => mState());
     
260. /**
     
261.     let seeking = false;
     
262.     let moveEventProc = (event) => {
     
263.         if (!seeking) return;
     
264.         let thePoint = 0,
     
265.         minV = 100;
     
266.         circlePoints.forEach((point, idx) => {
     
267.             let mx = (point.x - event.offsetX),  my = (point.y - event.offsetY) ;
     
268.                         let mv = mx * mx + my * my;
     
269.             if (mv < minV) {
     
270.                 minV = mv;
     
271.                 thePoint = idx;
     
272.             }
     
273.         });
     
274.                 let chkVal = thePoint / circumference;
     
275.         let chkTime = player.mObj.duration * chkVal;
     
276.         processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
     
277.         for (i = 0; i < player.lrcVec.length; i++) {
     
278.             if (player.lrcVec.seconds >= chkTime) {
     
279.                 //console.log(player.lrcVec.seconds, i);
     
280.                 player.idx = i;
     
281.                 player.mObj.currentTime = chkTime;
     
282.                 break;
     
283.             }
     
284.         };
     
285.     };
     
286.     processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
     
287.     bgc.addEventListener("mousemove", (event) => moveEventProc(event));
     
288.     processCircle.onclick = bgc.onclick = () => seeking = !seeking;
     
289. **/
     
290. 
     
291.         let fs = true;
     
292.         fullscreen.onclick = () => {
     
293.                 fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
     
294.                 fs = !fs;
     
295.         };
     
296. 
     
297. 
     
298.         //        控制图片的代码
     
299.         if ('getContext' in document.createElement('canvas')) {
     
300.                 HTMLImageElement.prototype.play = function() {
     
301.                         if (this.storeCanvas) {
     
302.                                 // 移除存储的canvas
     
303.                                 this.storeCanvas.parentElement.removeChild(this.storeCanvas);
     
304.                                 this.storeCanvas = null;
     
305.                                 // 透明度还原
     
306.                                 this.style.opacity = '';
     
307.                         }
     
308.                         if (this.storeUrl) {
     
309.                                 this.src = this.storeUrl;
     
310.                         }
     
311.                 };
     
312.                 HTMLImageElement.prototype.stop = function() {
     
313.                         var canvas = document.createElement('canvas');
     
314.                         // 尺寸
     
315.                         var width = this.width,
     
316.                         height = this.height;
     
317.                         if (width && height) {
     
318.                                 // 存储之前的地址
     
319.                                 if (!this.storeUrl) {
     
320.                                         this.storeUrl = this.src;
     
321.                                 }
     
322.                                 // canvas大小
     
323.                                 canvas.width = width;
     
324.                                 canvas.height = height;
     
325.                                 // 绘制图片帧（第一帧）
     
326.                                 canvas.getContext('2d').drawImage(this, 0, 0, width, height);
     
327.                                 // 重置当前图片
     
328.                                 try {
     
329.                                         this.src = canvas.toDataURL("image/gif");
     
330.                                 } catch(e) {
     
331.                                         // 跨域
     
332.                                         this.removeAttribute('src');
     
333.                                         // 载入canvas元素
     
334.                                         canvas.style.position = 'absolute';
     
335.                                         // 前面插入图片
     
336.                                         this.parentElement.insertBefore(canvas, this);
     
337.                                         // 隐藏原图
     
338.                                         this.style.opacity = '0';
     
339.                                         // 存储canvas
     
340.                                         this.storeCanvas = canvas;
     
341.                                 }
     
342.                         }
     
343.                 };
     
344.         }
     
345.         var image0 = document.getElementById("testImg");
     
346. }
     
347. </script>

复制代码