山里娃老师的摄影作品+同步歌词

咕咚来了

老谟深虑 发表于 2025-7-20 09:32
这个不是那个无缝连接的代码，这个是亚伦老师左右倒影音画代码带同步歌词。谢谢老乡的支持和鼓励 ...

其实是叫法不同，原理是一样的，代码也应该相同。

微尘

老谟深虑 发表于 2025-7-20 15:52
谢谢老友的欣赏和鼓励，下午好！

老友，傍晚好。

老谟深虑

微尘 发表于 2025-7-20 19:20
老友，傍晚好。

        老友明天见！

微尘

老谟深虑 发表于 2025-7-20 19:22
老友明天见！

愿老友晚上做个甜蜜的好梦。

老谟深虑

咕咚来了 发表于 2025-7-20 19:06
其实是叫法不同，原理是一样的，代码也应该相同。

1. <style>
   
2.         :root        {--w:1416px;--h:650px;}
   
3.   #oBlk {
   
4.     margin-left: 50% ; left:calc(-0.44 * var(--w));
   
5.     margin-top:100px;
   
6.     width: var(--w);
   
7.     height: var(--h);
   
8.     box-shadow: 3px 3px 10px #000;
   
9.     overflow: hidden;
   
10.     position: absolute;
    
11.   }
    
12. 
    
13.   #oBlk::before,
    
14.   #oBlk::after {
    
15.     position: absolute;
    
16.     content: '';
    
17.     left: var(--curX0);
    
18.     top: 0px;
    
19.     width: 100%;
    
20.     height: 100%;
    
21.     background: url('https://cccimg.com/view.php/d3674774aec627c8d5700993edb95edb.jpg') no-repeat center / cover;
    
22.   }                                                           
    
23. 
    
24.   #oBlk::after {
    
25.     left: var(--curX1);
    
26.     transform: scaleX(-1);
    
27.   }
    
28.   #comp {height:calc(var(--h) + 100px);}
    
29. </style>
    
30. <div id="oBlk"></div>
    
31. <div id="comp"></div>
    
32. <script>
    
33. {
    
34. 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;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;5 9=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))
    
35. }  
    
36. </script>
    
37. 
    

复制代码

这个是移动大图代码。

老谟深虑

咕咚来了 发表于 2025-7-20 19:06
其实是叫法不同，原理是一样的，代码也应该相同。

1. 
   
2. 
   
3. <div style="position: absolute; left:0px;width:100%;margin-top:120px;">
   
4. <style>
   
5.   #papa { margin: width: 1286px;height: 620px;background: url(https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;  overflow: hidden; z-index: 1; position: relative;}
   
6. #reflect-right { width:100%;z-index: 2;
   
7.        position:absolute;margin: 0px  0px;
   
8.     -webkit-box-reflect:left;
   
9.    }
   
10. .lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; }
    
11. .lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
    
12. .lrc #ul li { color: #087E13; font: 300 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
    
13. .lrc #ul li.active { transform: scale(1.2); color: #ff0000; font-weight: 650; }
    
14. #bfq{position: absolute;width:450px;height: 50px;overflow: hidden; z-index: 20;left: 20%; top:90%;}
    
15. .start{color: #087E13;position: absolute; top:12px; left: 0px;}
    
16. .end{color: #087E13;position: absolute;top:12px; left: 33%;}
    
17. #btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 15%; top: 0px;position: absolute;z-index: 20;cursor: pointer;}
    
18. </style>
    
19. <div id="papa">
    
20. <marquee  id="m"  behavior="scroll"  scrollamount="8"  height=620>
    
21. <img src="https://upfile.mp3.wf/view.php/13032e7adcf4ec65315964ca3a644ab7.jpg"id="reflect-right">
    
22. </marquee>
    
23. <div id="bfq">
    
24. <span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
    
25. </div>
    
26. <div class="lrc">
    
27.             <ul id="ul"></ul>
    
28.         </div>
    
29. </div>
    
30. <audio id="aud" src="https://upfile.mp3.wf/view.php/117d925e570018e742db4f4f80fb3e50.mp3" autoplay loop ></audio>
    
31. <script>
    
32.         var music = document.getElementById('aud');
    
33.         var m= document.getElementById('m');
    
34. 
    
35. var btn = document.getElementById('btn');
    
36.         btn.onclick = function() {
    
37.             if (aud.paused) {
    
38.                 aud.play();m.start();
    
39.                 btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
    
40.                } else {aud.pause();m.stop();
    
41.                 btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
    
42. }
    
43.      };
    
44.   const start = document.querySelector('.start')
    
45.    const end= document.querySelector('.end')
    
46. function conversion (value) {
    
47.     let minute = Math.floor(value / 60)
    
48.     minute = minute.toString().length === 1 ? ('0' + minute) : minute
    
49.     let second = Math.round(value % 60)
    
50.     second = second.toString().length === 1 ? ('0' + second) : second
    
51.     return `${minute}:${second}`
    
52.   }
    
53. 
    
54.   aud.onloadedmetadata = function () {
    
55.     end.innerHTML = conversion(aud.duration)
    
56.     start.innerHTML = conversion(aud.currentTime)
    
57.   }
    
58. setInterval(() => {
    
59.     start.innerHTML = conversion(aud.currentTime)
    
60.    
    
61.   }, 1000)
    
62. 
    
63. </script>
    
64. 
    
65. <script>
    
66.         let lrc = `
    
67. [00:00.000]雨后彩虹
    
68. [00:08.650]LRC：老谟深虑
    
69. [00:16.650]乌云沉重卷起风声
    
70. [00:20.790]苍穹低垂像泪痕般深沉
    
71. [00:25.080]天地似迷雾前路被掩藏
    
72. [00:29.220]可心底的信念始终未被撼动
    
73. [00:35.69]
    
74. [00:41.880]岁月如潮起伏无常
    
75. [00:46.290]多少次跌宕才换得一片清朗
    
76. [00:50.520]阴霾虽深重却挡不住光
    
77. [00:54.630]那雨后的彩虹早已在心中绽放
    
78. [01:00.780]雾散尽曙光入眼
    
79. [01:04.920]在泪光中看见希望浮现
    
80. [01:09.150]那彩虹越过山川
    
81. [01:12.720]是岁月写下的绚丽的弧线
    
82. [01:18.83]
    
83. [01:35.100]这一路荆棘
    
84. [01:39.180]终将引你踏上彩虹的阶梯
    
85. [01:43.350]心怀光明不惧雨中寒冷
    
86. [01:47.610]每场大雨都是前行的恩赐与赠礼
    
87. [01:56.14]
    
88. [01:56.23]雾散尽曙光入眼
    
89. [02:00.45]在泪光中看见希望浮现
    
90. [02:04.56]那彩虹越过山川
    
91. [02:09.17]是岁月写下的绚丽的弧线
    
92. [02:13.43]
    
93. [02:14.31]这一路荆棘
    
94. [02:15.67]终将引你踏上彩虹的阶梯
    
95. [02:21.70]心怀光明不惧雨中寒冷
    
96. [02:25.80]每场大雨都是前行的恩赐与赠礼
    
97. [02:30.88]
    
98. [02:43.83]
    
99. `;
    
100.         let lrcArr = lrc.split('\n');
     
101.         let result = [];
     
102.         var audio = document.querySelector("#aud");
     
103.         var ul = document.querySelector("#ul");
     
104.         var container = document.querySelector(".lrc");
     
105. 
     
106.         for (let i = 0; i < lrcArr.length; i++) {
     
107.             var lrcData = lrcArr[i].split(']');
     
108.             if (lrcData.length < 2) continue;
     
109.             var lrcTime = lrcData[0].substring(1);
     
110.             var obj = {
     
111.                 time: parseTime(lrcTime),
     
112.                 word: lrcData[1].trim()
     
113.             }
     
114.             result.push(obj);
     
115.         }
     
116. 
     
117.         function parseTime(lrcTime) {
     
118.             let lrcTimeArr = lrcTime.split(":");
     
119.             return +lrcTimeArr[0] * 60 + parseFloat(lrcTimeArr[1]);
     
120.         }
     
121. 
     
122.         function getIndex() {
     
123.             let time = audio.currentTime;
     
124.             for (let i = 0; i < result.length; i++) {
     
125.                 if (result[i].time > time) {
     
126.                     return i - 1;
     
127.                 }
     
128.             }
     
129.             return result.length - 1;
     
130.         }
     
131. 
     
132.         function createElements() {
     
133.             let fragment = document.createDocumentFragment();
     
134. 
     
135.             for (let i = 0; i < result.length; i++) {
     
136.                 let li = document.createElement("li");
     
137.                 li.innerText = result[i].word;
     
138. 
     
139.                 li.addEventListener("click", function () {
     
140.                     audio.currentTime = result[i].time;
     
141.                     setOffset();
     
142.                 });
     
143. 
     
144.                 fragment.appendChild(li);
     
145.             }
     
146. 
     
147.             ul.appendChild(fragment);
     
148.         }
     
149. 
     
150.         createElements();
     
151.         let containerHeight = container.clientHeight;
     
152.         let liHeight = ul.children[0]?.clientHeight || 50;
     
153.         let minOffset = 0;
     
154.         let maxOffset = ul.clientHeight - containerHeight;
     
155. 
     
156.         function setOffset() {
     
157.             const index = getIndex();
     
158.             if (index < 0) return;
     
159. 
     
160.             const liHeight = ul.children[0]?.clientHeight || 50;
     
161.             let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
     
162. 
     
163.             offset = Math.max(minOffset, Math.min(offset, maxOffset));
     
164. 
     
165.             ul.style.transform = `translateY(${-offset}px)`;
     
166. 
     
167.             ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
     
168.             if (index < ul.children.length) {
     
169.                 ul.children[index].classList.add('active');
     
170.             }
     
171.         }
     
172. 
     
173.         audio.addEventListener("timeupdate", setOffset);
     
174. </script>
     
175. 
     
176. </div>
     
177. <div style="height:960px;"></div>

复制代码

这个是左右倒影加同步歌词代码。

筱亭

大哥的精美代码音画多彩多样！向大哥学习

老谟深虑

筱亭 发表于 2025-7-21 03:44
大哥的精美代码音画多彩多样！向大哥学习

          谢谢老弟的美赞，早上好！

梦景

问候老师好！精美代码音画佳作，创意精心制作分享。为您点赞！向您学习！

老谟深虑

梦景 发表于 2025-7-21 15:23
问候老师好！精美代码音画佳作，创意精心制作分享。为您点赞！向您学习！ ...

         谢谢老友的欣赏和鼓励，下午好！