土鲁番的葡萄熟了（克隆，学习代码）

一师

[i=s] 本帖最后由 一师 于 2022-8-4 21:22 编辑 [/i]

一师

1. <div style="z-index: 127;width: 950px; height: 620px; margin-top:30px; margin-left:-150px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://pic.imgdb.cn/item/62e0f214f54cd3f93789e785.jpg)0 0/100% 100%;text-align: center;">
   
2. <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6a2f54cd3f937a3a1da.jpg" alt="" />
   
3.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6a2f54cd3f937a3a1e6.jpg" alt="" />
   
4.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6bff54cd3f937a44b29.jpg" alt="" />
   
5.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6bff54cd3f937a44b14.jpg" alt="" />
   
6.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6bef54cd3f937a44a99.jpg" alt="" />
   
7.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6a2f54cd3f937a3a243.jpg" alt="" />
   
8.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6a2f54cd3f937a3a22c.jpg" alt="" />
   
9.   <img class='photo'  src="https://pic.imgdb.cn/item/62e0f6a2f54cd3f937a3a1ac.jpg" alt="" />
   
10. <div class="container">
    
11. <audio autoplay="" class="audio" id="MusicPlayer" src="http://link.hhtjim.com/kw/6857244.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
    
12.       <div class="btn">
    
13.          <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;"/>
    
14.         </div>
    
15. <div class="img_border" id="aplay"></div>
    
16.      <div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
    
17. <div  class="lrc">
    
18.         <ul id="ullrc">
    
19.          </ul>
    
20. </div></div></div>
    
21. </div>
    
22. <style type="text/css">
    
23. .photo {width: 50%;
    
24.   height: 50%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
    
25.   position: absolute;top:30px; left:250px;
    
26. filter:contrast(120%)brightness(100%);
    
27.   animation: round 48s infinite;
    
28.   opacity: 1;}
    
29. @keyframes round {0% {opacity:1;transform:perspective(700px) translate(-150%,-10%)scale(1)rotateX(0deg)rotateY(0deg);filter:hue-rotate(0deg)contrast(140%)brightness(100%);}
    
30. 
    
31. 100% { opacity: 1;transform:perspective(700px) translate(200%,70%)scale(1)rotateX(0deg)rotateY(40deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
    
32. }
    
33. 
    
34. img:nth-child(1) {animation-delay: 42s;}
    
35. img:nth-child(2) {animation-delay: 36s;}
    
36. img:nth-child(3) {animation-delay: 30s;}
    
37. img:nth-child(4) {animation-delay: 24s;}
    
38. img:nth-child(5) {animation-delay: 18s;}
    
39. img:nth-child(6) {animation-delay: 12s;}
    
40. img:nth-child(7) {animation-delay: 6s;}
    
41. img:nth-child(8) {animation-delay: 0s;}
    
42. </style >
    
43. 
    
44. <style type="text/css">
    
45. .container{width: 1px;height: 1px;
    
46.     margin: 0;position: absolute;top:500px; left:0px;z-index: 100;}
    
47. .container #MusicPlayer{
    
48.     width: 250px;
    
49.     display: block;
    
50.     margin: 0 auto;}
    
51. .container .btn{
    
52.     display: block;z-index: 300;
    
53.     margin: 0;}
    
54. .container .lrc{
    
55.     width: 960px;
    
56.     height: 120px;z-index: 1;
    
57.     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);
    
58.     display: block;position: absolute;top:-10px; left:80px;
    
59.     margin: 0 auto;}
    
60. .container .lrc #ullrc{
    
61.     width: 100%;
    
62.     padding: 0;
    
63.     list-style: none;
    
64.     transition: 0.3s all ease;
    
65.     margin: 0;}
    
66. /*歌词普通样式*/
    
67. .container .lrc #ullrc li{
    
68.     height: 70px;
    
69.     line-height: 70px;
    
70. font-family:悟空大字库;
    
71.     font-size: 0px;
    
72.     color: #000078;
    
73.     font-weight: normal;
    
74.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
75.     list-style-type: none;
    
76.     text-align: center;
    
77.     display: block;
    
78.     width: 100%;
    
79.     margin: 0 auto;}
    
80. /*动态歌词样式*/
    
81. .container .lrc #ullrc li.active{
    
82.     font-size: 40px;
    
83.     color: #ff0000;
    
84.     font-weight: bold}
    
85. /*光碟动画*/
    
86. .container .img_border{display:inline-block;width:1100px;height:620px;margin:0px ;position: absolute;top:0px;left:00px;}
    
87. .container .img_border #aplay{display:block; }
    
88. .container .z360z{width: 1100px; height: 620px;
    
89.     z-index: 13;position: absolute;
    
90.    top:-500px;
    
91.     left: 0px;
    
92. animation: rotating 0.05s linear infinite;}
    
93. @keyframes rotating {
    
94. 0%{opacity: 1;background: linear-gradient(6deg, rgba(251, 81, 81, 0.33) 13%,rgba(106, 80, 240, 0.07) 47%,rgba(65, 185, 41, 0.42) 85%);}
    
95. 50% {opacity: 1;background: linear-gradient(6deg, rgba(114, 251, 81, 0.33) 13%,rgba(240, 184, 80, 0.05) 47%,rgba(185, 41, 45, 0.42) 87%);}
    
96. 100%{opacity: 1;background: linear-gradient(6deg, rgba(251, 81, 81, 0.33) 13%,rgba(80, 240, 215, 0.11) 47%,rgba(26, 77, 251, 0.42) 87%);}
    
97. }
    
98. </style>
    
99. <style type="text/css">.items  { animation: slider 0.26s linear infinite ;}
    
100. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
     
101. to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
     
102. </style>
     
103. <script >var lrc = `[00:00.83]吐鲁番的葡萄熟了 - 降央卓玛
     
104. [00:04.92]词：瞿琮
     
105. [00:06.11]曲：施光南
     
106. [00:08.11]LRC：老谟深虑
     
107. [00:10.39]克里木参军去到边哨
     
108. [00:17.55]临行时种下了一颗葡萄
     
109. [00:24.68]果园的姑娘啊
     
110. [00:27.85]阿娜尔罕呦
     
111. [00:31.23]精心培育这绿色的小苗
     
112. [00:40.71]啊
     
113. [00:44.78]姑娘啊遥望着雪山哨卡
     
114. [00:52.08]捎去了一串串
     
115. [00:54.95]甜美的葡萄
     
116. [00:59.33]吐鲁番的葡萄熟了
     
117. [01:02.91]阿娜尔罕的心儿碎了
     
118. [01:06.57]阿娜尔罕的心儿碎了
     
119. [01:23.56]吐鲁番的葡萄熟了
     
120. [01:27.12]阿娜尔罕的心儿碎了
     
121. [01:30.73]阿娜尔罕的心儿碎了
     
122. [01:52.75]
     
123. [01:55.77]`;
     
124. function $(id) {return document.getElementById(id);
     
125. }//这样写以后getid方便
     
126. function getLrcArray() {
     
127.     var parts = lrc.split("\n");
     
128.     for (let index = 0; index < parts.length; index++) {
     
129.         parts[index] = getLrcObj(parts[index]);
     
130.     }
     
131.     return parts;
     
132. 
     
133.     function getLrcObj(content) {
     
134.         var twoParts = content.split("]");
     
135.         var time = twoParts[0].substr(1);
     
136.         var timeParts = time.split(":");
     
137.         var seconds = +timeParts[1];
     
138.         var min = +timeParts[0];
     
139.         seconds = min * 60 + seconds;
     
140.         var words = twoParts[1];
     
141.         return{
     
142.             seconds: seconds,
     
143.             words: words,
     
144.         };
     
145.     }
     
146. }
     
147. var lrcArray = getLrcArray();
     
148. function inputLrc() {
     
149.     for (let index = 0; index < lrcArray.length; index++) {
     
150.         var li = document.createElement("li");
     
151.         li.innerText = lrcArray[index].words;
     
152.         $("ullrc").appendChild(li);
     
153.     }
     
154. }
     
155. inputLrc();
     
156. function setPosition() {
     
157.     var index = getLrcIndex();
     
158.     if (index == -1) {
     
159.         return;
     
160.     }
     
161.     var lrc_li_height = 70, lrc_ul_height = 50;
     
162.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
163.     if (top < 0) {
     
164.         top = 0;
     
165.     }
     
166.     $("ullrc").style.marginTop = -top + "px";
     
167.     var activeLi = $("ullrc").querySelector(".active");
     
168.     if(activeLi){
     
169.         activeLi.classList.remove("active");
     
170.     }
     
171.     $("ullrc").children[index].classList.add("active");
     
172. }
     
173. var turn = 0;
     
174. function getLrcIndex(){
     
175.     var time = $("MusicPlayer").currentTime + turn;
     
176.     for (var index = 0; index < lrcArray.length; index++) {
     
177.         if (lrcArray[index].seconds > time) {
     
178.             return index - 1;
     
179.         }
     
180.     }
     
181. }
     
182. $("MusicPlayer").ontimeupdate = setPosition;
     
183. </script>
     
184. <script>
     
185.          var aud = document.getElementById("MusicPlayer");
     
186. var img = document.getElementById("playpause");
     
187. img.onclick = function() {
     
188.         if (aud.paused) {
     
189.                 aud.play();
     
190.         } else {
     
191.                 aud.pause();
     
192.         }
     
193. }
     
194. aud.addEventListener("play", function (e) {
     
195. img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
     
196. }, false);
     
197. aud.addEventListener("pause", function (e) {
     
198. img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
     
199. }, false);
     
200. </script>
     
201. <script type="text/javascript">
     
202. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
     
203. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
204. </script>

复制代码

潇湘翁

欣赏老师佳作！赞！

党项人

美的太太！

山水人家

欣赏老师精美佳作，新疆歌好听。

许森匡.

欣赏佳作 - 赞！

九品莲花

欣赏老师的音画佳作！点赞！

海儿心

老梦缘

欣赏老师的精彩分享，问好！

沧海笑

欣赏老师佳作！