试帖 克隆（换背景）

我就来看看

提取的时间信息是这样的

1. lineLyric:"可可托海的牧羊人 - 王琪",time:"0.0"},{lineLyric:"词：王琪",time:"2.79"},{lineLyric:"曲：王琪",time:"3.21"},{lineLyric:"编曲：达吾然",time:"3.7"},{lineLyric:"缩混：文克津",time:"4.48"},{lineLyric:"那夜的雨也没能留住你",time:"18.18"},{lineLyric:"山谷的风它陪着我哭泣",time:"25.36"},{lineLyric:"你的驼铃声仿佛还在我耳边响起",time:"33.13"},{lineLyric:"告诉我你曾来过这里",time:"40.36"},{lineLyric:r,time:"47.54"},{lineLyric:s,time:"54.9"},{lineLyric:t,time:"62.45"},{lineLyric:u,time:"69.99"},{lineLyric:f,time:"76.88"},{lineLyric:g,time:"84.32"},{lineLyric:h,time:"92.31"},{lineLyric:i,time:"99.44"},{lineLyric:j,time:"101.57"},{lineLyric:k,time:"106.53"},{lineLyric:l,time:"113.69"},{lineLyric:m,time:"121.95"},{lineLyric:n,time:"129.22"},{lineLyric:r,time:"165.93"},{lineLyric:s,time:"173.09"},{lineLyric:t,time:"180.95"},{lineLyric:u,time:"188.19"},{lineLyric:f,time:"194.91"},{lineLyric:g,time:"202.33"},{lineLyric:h,time:"210.34"},{lineLyric:i,time:"217.55"},{lineLyric:j,time:"219.68"},{lineLyric:k,time:"224.39"},{lineLyric:l,time:"231.89"},{lineLyric:m,time:"240.05"},{lineLyric:n,time:"247.4"},{lineLyric:f,time:"254.08"},{lineLyric:g,time:"261.29"},{lineLyric:h,time:"269.62"},{lineLyric:i,time:"276.63"},{lineLyric:j,time:"278.71"},{lineLyric:k,time:"283.45"},{lineLyric:l,time:"290.86"},{lineLyric:m,time:"299.14"},{lineLyric:n,time:"306.25"}]

复制代码

湛蓝

光盘移动到左侧了，现在可以了

潇湘翁

湛蓝 发表于 2022-4-15 12:36
本帖最后由 湛蓝 于 2022-4-15 13:42 编辑 潇湘老师的代码：不知道老师的代码为何偏移,有点不解！用我的代 ...

老师：在我这里看，22楼的图片还是很偏左的，我用的代码是老师给我的。我自己认为我的制作过程是按照老师教的规范条款进行的。至于在真实的制作过程中有什么纰漏，那我就不知道了！要不老师再发一次代码，我再认真的做一次！老师：我补充一点，就是我以前每次发的作品，都有偏左的情况，那是用老师告诉我纠偏的方法调整了的，这次做这款作品我不知道怎么调整了。

湛蓝

潇湘翁 发表于 2022-4-15 14:05
老师：在我这里看，22楼的图片还是很偏左的，我用的代码是老师给我的。我自己认为我的制作过程是按照老师 ...

我再发一次，调整方法我再试一次，不行的话，等看看老师来了一定有办法

湛蓝

1. <div style="background: url("http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif") 0px 0px / 30% 30%, linear-gradient(80deg, rgb(0, 0, 128), rgb(0, 51, 0), rgb(255, 0, 0), rgb(0, 240, 0)); width: 1000px; height: 600px; text-align: center; overflow: hidden; margin-top: 30px; margin-left: -230px; z-index: 127; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; transform: rotate(0deg);">
   
2. 
   
3. <img class="photo" alt="" src="http://tuku.link/imgs/2022/04/f13793dec95eeac0.jpg">
   
4. 
   
5. <img class="photo" alt="" src="http://tuku.link/imgs/2022/04/ace30c9c93024f01.jpg">
   
6. 
   
7. <img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWSBR.jpg">
   
8. 
   
9. 
   
10. <img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWbqA.jpg">
    
11. 
    
12. 
    
13. 
    
14. <img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWdU0.jpg">
    
15. 
    
16. <img class="photo" alt="" src="http://tuku.link/imgs/2022/04/dac57df257cde97e.jpg">
    
17. 
    
18. <img class="photo" alt="" src="http://tuku.link/imgs/2022/04/8ce83e7797e06271.jpg">
    
19. 
    
20. <img class="photo" alt="" src="http://tuku.link/imgs/2022/04/501daa3f5e737022.jpg">
    
21. 
    
22. 
    
23. <div class="container">
    
24. <audio class="audio" id="MusicPlayer" style="width: 1%; height: 1%; z-index: 1;" src="http://music.lanyes.org/content/plugins/lymusic_tool/play.php?type=kw&id=215880440&.mp3" autoplay="" loop="" controls=""></audio>
    
25.       <div class="btn">
    
26.         <span id="bf" style="left: 80px; top: -70px; width: 980px; height: 120px; position: absolute; z-index: 300;" onclick="bf();"></span>
    
27.         <span id="bf" onclick="rbf();"></span>
    
28.       </div>
    
29. <div class="img_border"><img id="aplay" style="background: url("http://pan.yinhuabbs.cn/view.php/7139d981f5e411051b77852e1a5e41ae.png") 0px 0px / 100% 100%, url("https://s1.ax1x.com/2022/04/13/LKXhC9.jpg") -20px 0px / 180% 100%; width: 100%; height: 100%; z-index: 110;"></div>
    
30.      <div class="items">
    
31. <div class="lrc">
    
32.         <ul id="ullrc">
    
33.          </ul>
    
34. </div></div></div>
    
35. </div>
    
36. <style type="text/css">
    
37. .photo {width: 1000px;
    
38.   height: 600px;
    
39.   position: absolute;top:0px; left:0px;
    
40. filter:contrast(130%)brightness(100%);
    
41.   animation: round 46s infinite;
    
42.   opacity: 0;}
    
43. @keyframes round {1% {opacity: 1;clip-path:circle(0% at 130% 50%);
    
44. -webkit-transform:translate(0%,0%)scale(1);}
    
45. 9% {opacity: 1;clip-path:  circle(100% at 50%  50%);
    
46. -webkit-transform:translate(0%,0%)scale(1);}
    
47. 18% {opacity: 0.6;clip-path: circle(100% at 50% 50%);
    
48. -webkit-transform:translate(0%,0%)scale(1.5);}
    
49. 20% {opacity: 0;clip-path: circle(100% at 50% 50%);
    
50. -webkit-transform:translate(0%,0%)scale(2);}
    
51. }
    
52. img:nth-child(8) {animation-delay: 40s;}
    
53. img:nth-child(7) {animation-delay: 34s;}
    
54. img:nth-child(6) {animation-delay: 28s;}
    
55. img:nth-child(5) {animation-delay: 22s;}
    
56. img:nth-child(4) {animation-delay: 16s;}
    
57. img:nth-child(3) {animation-delay: 12s;}
    
58. img:nth-child(2) {animation-delay: 6s;}
    
59. </style>
    
60. 
    
61. <style type="text/css">
    
62. .container{width: 1px;height: 1px;
    
63.     margin: 0;position: absolute;top:500px; left:0px;z-index: 100;}
    
64. .container #MusicPlayer{
    
65.     width: 250px;
    
66.     display: block;
    
67.     margin: 0 auto;}
    
68. .container .btn{
    
69.     display: block;z-index: 300;
    
70.     margin: 0;}
    
71. .container .lrc{
    
72.     width: 960px;
    
73.     height: 120px;z-index: 1;
    
74.     overflow: hidden;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);
    
75.     display: block;position: absolute;top:-10px; left:0px;
    
76.     margin: 0 auto;}
    
77. .container .lrc #ullrc{
    
78.     width: 100%;
    
79.     padding: 0;
    
80.     list-style: none;
    
81.     transition: 0.3s all ease;
    
82.     margin: 0;}
    
83. /*歌词普通样式*/
    
84. .container .lrc #ullrc li{
    
85.     height: 70px;
    
86.     line-height: 70px;
    
87. font-family:悟空大字库;
    
88.     font-size: 0px;
    
89.     color: #000078;
    
90.     font-weight: normal;
    
91.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
92.     list-style-type: none;
    
93.     text-align: center;
    
94.     display: block;
    
95.     width: 100%;
    
96.     margin: 0 auto;}
    
97. /*动态歌词样式*/
    
98. .container .lrc #ullrc li.active{
    
99.     font-size: 40px;
    
100.     color: #ff0000;
     
101.     font-weight: bold}
     
102. /*光碟动画*/
     
103. .container .img_border{display:inline-block;width:200px;height:200px;margin:0px ;position: absolute;top:-140px;left:26px;transform: scale(1,1);transform: rotateX(0deg) rotateY
     
104. 
     
105. (0deg) rotateZ(0deg);border-radius:50%;}
     
106. .container .img_border #aplay{display:block;border:2px solid #cccccc;border-radius:50%; }
     
107. .container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{to {transform: rotate(360deg);}}
     
108. .audio{
     
109.     z-index: 1;
     
110.     bottom: 0;
     
111.     opacity: 0;
     
112. transition: all 2s;
     
113. width: 1px;
     
114. height: 1px;
     
115. position: absolute;top:0px; left:0px;
     
116. }
     
117. .audio:hover{
     
118.     opacity: 0;
     
119. }
     
120. </style>
     
121. <style type="text/css">.items  { z-index: 1540;animation: slider 0.26s linear infinite ;}
     
122. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
     
123. 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
     
124. </style>
     
125. <script>var lrc = `[00:04]心中最美的风景线
     
126. [00:06]作词：轻云望月
     
127. [00:09]作曲：轻云望月
     
128. [00:11]DJ：月之歌音乐室
     
129. [00:13]混音：烟圈蔓延
     
130. [00:15]出品：亚伦影音
     
131. [00:19]“未经授权禁止翻唱和商业使用”
     
132. [00:22]男：
     
133. [00:23]我不知道远方究竟有多远
     
134. [00:28]有你的地方就是我的终点
     
135. [00:33]哪怕趟万水 哪怕越千山
     
136. [00:38]也愿意奔向你和你手相牵
     
137. [00:42]女：
     
138. [00:43]我不知道红尘有多少爱恋
     
139. [00:48]自从第一眼就把你爱心间
     
140. [00:53]人为你相思 心为你牵绊
     
141. [00:58]再多曲折都难把我的爱阻断
     
142. [01:03]男：
     
143. [01:03]你是我心中最美的风景线
     
144. [01:08]感谢你出现把我人生温暖
     
145. [01:13]女：
     
146. [01:13]这一段情爱 这一场尘缘
     
147. [01:18]就算到天荒地老都不会厌倦
     
148. [01:23]男：
     
149. [01:23]你是我心中最美的风景线
     
150. [01:28]谢谢你出现把我流年惊艳
     
151. [01:33]女：
     
152. [01:34]爱着你所爱 念着你所念
     
153. [01:38]这辈子你就是我永远的永远
     
154. [02:03]男：
     
155. [02:04]我不知道红尘有多少爱恋
     
156. [02:09]自从第一眼就把你爱心间
     
157. [02:13]女：
     
158. [02:14]人为你相思 心为你牵绊
     
159. [02:19]再多曲折都难把我的爱阻断
     
160. [02:23]男：
     
161. [02:24]你是我心中最美的风景线
     
162. [02:29]感谢你出现把我人生温暖
     
163. [02:34]女：
     
164. [02:34]这一段情爱 这一场尘缘
     
165. [02:39]就算到天荒地老都不会厌倦
     
166. [02:44]男：
     
167. [02:44]你是我心中最美的风景线
     
168. [02:49]谢谢你出现把我流年惊艳
     
169. [02:53]女：
     
170. [02:54]爱着你所爱 念着你所念
     
171. [02:59]这辈子你就是我永远的永远
     
172. [03:04]男：
     
173. [03:04]你是我心中最美的风景线
     
174. [03:10]谢谢你出现把我流年惊艳
     
175. [03:14]女：
     
176. [03:15]爱着你所爱 念着你所念
     
177. [03:20]这辈子你就是我永远的永远
     
178. [03:24]合：
     
179. [03:25]这辈子你就是我永远的永远`;
     
180. function $(id) {return document.getElementById(id);
     
181. }//这样写以后getid方便
     
182. function getLrcArray() {
     
183.     var parts = lrc.split("\n");
     
184.     for (let index = 0; index < parts.length; index++) {
     
185.         parts[index] = getLrcObj(parts[index]);
     
186.     }
     
187.     return parts;
     
188. 
     
189.     function getLrcObj(content) {
     
190.         var twoParts = content.split("]");
     
191.         var time = twoParts[0].substr(1);
     
192.         var timeParts = time.split(":");
     
193.         var seconds = +timeParts[1];
     
194.         var min = +timeParts[0];
     
195.         seconds = min * 60 + seconds;
     
196.         var words = twoParts[1];
     
197.         return{
     
198.             seconds: seconds,
     
199.             words: words,
     
200.         };
     
201.     }
     
202. }
     
203. var lrcArray = getLrcArray();
     
204. function inputLrc() {
     
205.     for (let index = 0; index < lrcArray.length; index++) {
     
206.         var li = document.createElement("li");
     
207.         li.innerText = lrcArray[index].words;
     
208.         $("ullrc").appendChild(li);
     
209.     }
     
210. }
     
211. inputLrc();
     
212. function setPosition() {
     
213.     var index = getLrcIndex();
     
214.     if (index == -1) {
     
215.         return;
     
216.     }
     
217.     var lrc_li_height = 70, lrc_ul_height = 50;
     
218.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
219.     if (top < 0) {
     
220.         top = 0;
     
221.     }
     
222.     $("ullrc").style.marginTop = -top + "px";
     
223.     var activeLi = $("ullrc").querySelector(".active");
     
224.     if(activeLi){
     
225.         activeLi.classList.remove("active");
     
226.     }
     
227.     $("ullrc").children[index].classList.add("active");
     
228. }
     
229. var turn = 0;
     
230. function getLrcIndex(){
     
231.     var time = $("MusicPlayer").currentTime + turn;
     
232.     for (var index = 0; index < lrcArray.length; index++) {
     
233.         if (lrcArray[index].seconds > time) {
     
234.             return index - 1;
     
235.         }
     
236.     }
     
237. }
     
238. $("MusicPlayer").ontimeupdate = setPosition;
     
239. </script>
     
240. <script>
     
241.         function rbf() {
     
242.             var audio = document.getElementById('MusicPlayer');
     
243.             var bf=document.getElementById("bf");
     
244.             audio.currentTime = 0;
     
245.             audio.play();
     
246.             bf.innerText="";
     
247.         }
     
248. 
     
249.         function bf() {
     
250.             var audio = document.getElementById('MusicPlayer');
     
251.             var bf=document.getElementById("bf");
     
252.             if (audio !== null) {
     
253.                 if (audio.paused) {
     
254.                     audio.play(); //audio.play();// 这个就是播放  
     
255.                     bf.innerText="";
     
256.                 } else {
     
257.                     audio.pause(); // 这个就是暂停
     
258.                     bf.innerText="";
     
259.                 }
     
260.             }
     
261.         }
     
262. </script>
     
263. <script type="text/javascript">
     
264. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
265. 
     
266. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
267. 
     
268. my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric[i][0]){ document.getElementById("ullrc").innerHTML = lyric[i][1]; if(i
     
269. 
     
270. +1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>
     
271. 
     
272. <div style="height:170px;"></div>
     

复制代码

湛蓝

你调一下这数值试试（最上面）

我就来看看

35楼代码好像又没框了

湛蓝

我就来看看 发表于 2022-4-15 14:50
35楼代码好像又没框了

有边框吧，我试试

湛蓝

我就来看看 发表于 2022-4-15 14:50
35楼代码好像又没框了

35楼的代码是我记事本里复制粘贴的，35楼的的确没显示

但是直接复制记事本的正常显示，不知道哪里出了问题

我就来看看

湛蓝 发表于 2022-4-15 15:27 35楼的代码是我记事本里复制粘贴的，35楼的的确没显示 但是直接复制记事本的正常显示，不知道哪里出了 ...

把问题简化，光看框能不能显示