代码测试，请勿跟帖！

娟子

娟子

娟子

------------

娟子

---------

娟子

1. <iframe frameborder="0" src="https://tv.sohu.com/s/sohuplayer/iplay.html?bid=590362245&autoplay=true&disablePlaylist=true" scrolling="no" width="535" height="950"></iframe>

复制代码

娟子

1. </i><br /><br /></i><br /><br /><div class="cont-area">
2. <div style="width: 100%;height: 675px;position: absolute;MARGIN-LEFT:-296px;MARGIN-top:-80px;"><iframe frameborder="0" height="675" marginheight="0" marginwidth="0" scrolling="no" src="
3. https://tv.sohu.com/s/sohuplayer/iplay.html?bid=590543005&autoplay=true&disablePlaylist=true" width="1200"></iframe></div>
4. <div style="width: 1200%;height: 675px;">&nbsp;</div>
5. <p>&nbsp;</p>
6. </div></td></tr></td></tr></td></tr>

复制代码

娟子

全屏观赏

" />

 

 

 

 

 

 

 

娟子

------------

娟子

1. </i><br /><br />
2. <style>
3. #papa {
4. margin: 0px auto 32px calc(50% - 593px);
5. width: 1024px;
6. height: 640px;
7. background: url('https://pic.imgdb.cn/item/67354e0dd29ded1a8c13a1f3.jpg') no-repeat center/cover;
8. box-shadow: 3px 3px 20px #000;
9. overflow: hidden;
10. position: relative;
11. z-index: 1;
12. }
14. #mypic {
15. position: absolute;
16. width: 100px;
17. overflow: hidden;
18. border-radius: 50%;
19. margin-top: 400px;
20. margin-left: 780px;
21. cursor: pointer;
22. z-index: 99;
23. animation: rot 6s infinite linear var(--state);
24. }
26. @keyframes rot {
27. to {
28. transform: rotate(360deg);
29. }
30. }
32. .lrc {
33. width: 100%;
34. height: 120px;
35. overflow: hidden;
36. 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);
37. display: block;
38. position: absolute;
39. top: 88%;
40. left: 23%;
41. z-index: 5;
42. margin: 0 auto;
43. }
45. .lrc #ullrc {
46. width: 100%;
47. padding: 0;
48. list-style: none;
49. transition: 0.3s all ease;
50. margin: 0;
51. }
53. /*歌词普通样式*/
54. .lrc #ullrc li {
55. height: 70px;
56. line-height: 60px;
57. font-family:黑体;
58. font-size: 0px;
59. color: #000078;
60. font-weight: normal;
61. transition: .3s all ease;
62. /*一定要加上不然看着突兀*/
63. list-style-type: none;
64. text-align: center;
65. display: block;
66. width: 100%;
67. margin: 0 auto;
68. }
70. /*动态歌词样式*/
71. .lrc #ullrc li.active {
72. font-size: 35px;
73. color: #FF0000;
74. text-align: center;
75. }
76. </style>
77. <div id="papa">
78. <img id="mypic" src="https://pic.imgdb.cn/item/647b1e12f024cca1730e8c3f.png" alt="" />
79. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1304882225.mp3" autoplay loop></audio>
80. <div class="lrc">
81. <ul id="ullrc"></ul>
82. </div>
83. </div>
84. <style type="text/css"></style>
85. <script>
86. var lrc = `[00:00.000] 作词 : 周郁辉
87. [00:00.32] 蓝天合唱团-少年先锋队队歌
88. [00:03.28]作词：郭沫若 周郁辉
89. [00:05.25]作曲：马思聪 寄明
90. [00:07.65]LRC歌词：武朝歌
91. [00:09.65]我们是共产主义接班人
92. [00:16.40]继承革命先辈的光荣传统
93. [00:22.42]爱祖国爱人民
94. [00:26.20]鲜艳的红领巾飘扬在前胸
95. [00:32.78]不怕困难不怕敌人
96. [00:36.82]顽强学习坚决斗争
97. [00:40.86]向着胜利勇敢前进
98. [00:44.65]向着胜利勇敢前进前进
99. [00:48.14]向着胜利勇敢前进
100. [00:52.79]我们是共产主义接班人
101. [01:05.87]我们是共产主义接班人
102. [01:13.35]沿着革命先辈的光荣路程
103. [01:19.31]爱祖国爱人民
104. [01:23.15]少先队员是我们骄傲的名称
105. [01:29.67]时刻准备建立功勋
106. [01:33.67]要把敌人消灭干净
107. [01:37.71]为着理想勇敢前进
108. [01:41.64]为着理想勇敢前进前进
109. [01:45.13]为着理想勇敢前进
110. [01:48.61]我们是共产主义接班人
111. `;
112. function getLrcArray() {
113. var parts = lrc.split("\n");
114. for (let index = 0; index < parts.length; index++) {
115. parts[index] = getLrcObj(parts[index]);
116. }
117. return parts;
119. function getLrcObj(content) {
120. var twoParts = content.split("]");
121. var time = twoParts[0].substr(1);
122. var timeParts = time.split(":");
123. var seconds = +timeParts[1];
124. var min = +timeParts[0];
125. seconds = min * 60 + seconds;
126. var words = twoParts[1];
127. return {
128. seconds: seconds,
129. words: words,
130. };
131. }
132. }
133. var lrcArray = getLrcArray();
135. function inputLrc() {
136. for (let index = 0; index < lrcArray.length; index++) {
137. var li = document.createElement("li");
138. li.innerText = lrcArray[index].words;
139. ullrc.appendChild(li);
140. }
141. }
142. inputLrc();
144. function setPosition() {
145. var index = getLrcIndex();
146. if (index == -1) {
147. return;
148. }
149. var lrc_li_height = 70,
150. lrc_ul_height = 60;
151. var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
152. if (top < 0) {
153. top = 0;
154. }
155. ullrc.style.marginTop = -top + "px";
156. var activeLi = ullrc.querySelector(".active");
157. if (activeLi) {
158. activeLi.classList.remove("active");
159. }
160. ullrc.children[index].classList.add("active");
161. }
162. var turn = 0;
164. function getLrcIndex() {
165. var time = aud.currentTime + turn;
166. for (var index = 0; index < lrcArray.length; index++) {
167. if (lrcArray[index].seconds > time) {
168. return index - 1;
169. }
170. }
171. }
172. aud.ontimeupdate = setPosition;
173. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
174. aud.addEventListener('pause', () => mState());
175. aud.addEventListener('playing', () => mState());
176. mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
177. </script>&nbsp;</div>
178. </td></tr>

复制代码

娟子

-----------