再试滚动大图：《微风细雨》

丁香

1. <style>
   
2.   #papa {
   
3.     margin: 80px auto 32px calc(50% - 473px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     background: url('https://pic1.imgdb.cn/item/67d4ecb888c538a9b5be02d9.jpg') no-repeat
   
7. 
   
8. center/cover;
   
9.     box-shadow: 3px 3px 20px #000;
   
10.     overflow: hidden;
    
11.     position: relative;
    
12.     z-index: 1;
    
13.   }
    
14. 
    
15.   #mypic {
    
16.     position: absolute;
    
17.     width: 100px;
    
18.     overflow: hidden;
    
19.     border-radius: 50%;
    
20.     margin-top: 480px;
    
21.     margin-left: 30px;
    
22.     cursor: pointer;
    
23.     z-index: 99;
    
24.     animation: rot 6s infinite linear var(--state);
    
25.   }
    
26. 
    
27.   @keyframes rot {
    
28.     to {
    
29.       transform: rotate(360deg);
    
30.     }
    
31.   }
    
32. 
    
33.   .lrc {
    
34.     width: 100%;
    
35.     height: 120px;
    
36.     overflow: hidden;
    
37.     filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow (#ffffff -1px 0
    
38. 
    
39. 0) drop-shadow(#ffffff 0 -1px 0);
    
40.     display: block;
    
41.     position: absolute;
    
42.     top: 80%;
    
43.     left: 8%;
    
44.     z-index: 5;
    
45.     margin: 0 auto;
    
46.   }
    
47. 
    
48.   .lrc #ullrc {
    
49.     width: 100%;
    
50.     padding: 0;
    
51.     list-style: none;
    
52.     transition: 0.3s all ease;
    
53.     margin: 0;
    
54.   }
    
55. 
    
56.   /*歌词普通样式*/
    
57.   .lrc #ullrc li {
    
58.     height: 70px;
    
59.     line-height: 60px;
    
60.     font-family: 华文隶书;
    
61.     font-size: 0px;
    
62.     color: #000078;
    
63.     font-weight: normal;
    
64.     transition: .3s all ease;
    
65.     /*一定要加上不然看着突兀*/
    
66.     list-style-type: none;
    
67.     text-align: center;
    
68.     display: block;
    
69.     width: 100%;
    
70.     margin: 0 auto;
    
71.   }
    
72. 
    
73.   /*动态歌词样式*/
    
74.   .lrc #ullrc li.active {
    
75.     font-size: 40px;
    
76.     color: #0000FF;
    
77.     text-align: center;
    
78.   }
    
79. </style>
    
80. <div id="papa">
    
81.   <img id="mypic" src="https://pic.imgdb.cn/item/67220d84d29ded1a8c493f87.png" alt="" />
    
82.   <audio id="aud" src="http://music.163.com/song/media/outer/url?id=5274367.mp3" autoplay loop></audio>
    
83.   <div class="lrc">
    
84.     <ul id="ullrc"></ul>
    
85.   </div>
    
86. </div>
    
87. <style type="text/css"></style>
    
88. 
    
89. <script >var lrc =`[00:00.10] 武朝歌欢迎您\n[00:22.24]因为爱着你的爱\n[00:27.54]因为梦着你的梦\n[00:33.05]所以悲伤着你的悲伤\n[00:38.24]幸福着你的幸福\n[00:44.14]因为路过你的路\n[00:49.78]因为苦过你的苦\n[00:55.12]所以快乐着你的快乐\n[01:00.36]追逐着你的追逐\n[01:06.17]\n[01:09.15]因为誓言不敢听\n[01:14.49]因为承诺不敢信\n[01:20.98]所以放心着你的沉默\n[01:25.22]去说服明天的命运\n[01:31.08]没有风雨躲得过\n[01:36.43]没有坎坷不必走\n[01:42.09]所以安心的牵你的手\n[01:47.29]不去想该不该回头\n[01:53.17]\n[01:56.92]也许牵了手的手\n[02:01.38]前生不一定好走\n[02:07.93]也许有了伴的路\n[02:12.42]今生还要更忙碌\n[02:18.96]所以牵了手的手\n[02:23.41]来生还要一起走\n[02:28.01]所以有了伴的路\n[02:34.45]没有岁月可回头\n[02:40.32]\n[03:02.24]因为爱着你的爱\n[03:07.79]因为梦着你的梦\n[03:13.13]所以悲伤着你的悲伤\n[03:18.38]幸福着你的幸福\n[03:24.18]因为路过你的路\n[03:29.73]因为苦过你的苦\n[03:35.27]所以快乐着你的快乐\n[03:40.47]追逐着你的追逐\n[03:46.17]\n[03:49.06]也许牵了手的手\n[03:54.61]前生不一定好走\n[04:00.11]也许有了伴的路\n[04:05.61]今生还要更忙碌\n[04:11.06]所以牵了手的手\n[04:16.67]来生还要一起走\n[04:22.17]所以有了伴的路\n[04:27.68]没有岁月可回头\n[04:33.23]所以有了伴的路\n[04:38.73]没有岁月可回头\n[04:44.24]\n[04:45.31]\n[04:46.98]\n[04:47.17]\n[04:48.71]\n[04:49.97]\n[04:50.68]\n[04:51.97]\n[04:52.68]\n[04:53.08]\n[04:54.97]\n[04:55.45]\n[04:56.16]\n[04:57.35]\n"},"code":200}
    
90. `;
    
91. 
    
92.   function getLrcArray() {
    
93.     var parts = lrc.split("\n");
    
94.     for (let index = 0; index < parts.length; index++) {
    
95.       parts[index] = getLrcObj(parts[index]);
    
96.     }
    
97.     return parts;
    
98. 
    
99.     function getLrcObj(content) {
    
100.       var twoParts = content.split("]");
     
101.       var time = twoParts[0].substr(1);
     
102.       var timeParts = time.split(":");
     
103.       var seconds = +timeParts[1];
     
104.       var min = +timeParts[0];
     
105.       seconds = min * 60 + seconds;
     
106.       var words = twoParts[1];
     
107.       return {
     
108.         seconds: seconds,
     
109.         words: words,
     
110.       };
     
111.     }
     
112.   }
     
113.   var lrcArray = getLrcArray();
     
114. 
     
115.   function inputLrc() {
     
116.     for (let index = 0; index < lrcArray.length; index++) {
     
117.       var li = document.createElement("li");
     
118.       li.innerText = lrcArray[index].words;
     
119.       ullrc.appendChild(li);
     
120.     }
     
121.   }
     
122.   inputLrc();
     
123. 
     
124.   function setPosition() {
     
125.     var index = getLrcIndex();
     
126.     if (index == -1) {
     
127.       return;
     
128.     }
     
129.     var lrc_li_height = 70,
     
130.       lrc_ul_height = 60;
     
131.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
132.     if (top < 0) {
     
133.       top = 0;
     
134.     }
     
135.     ullrc.style.marginTop = -top + "px";
     
136.     var activeLi = ullrc.querySelector(".active");
     
137.     if (activeLi) {
     
138.       activeLi.classList.remove("active");
     
139.     }
     
140.     ullrc.children[index].classList.add("active");
     
141.   }
     
142.   var turn = 0;
     
143. 
     
144.   function getLrcIndex() {
     
145.     var time = aud.currentTime + turn;
     
146.     for (var index = 0; index < lrcArray.length; index++) {
     
147.       if (lrcArray[index].seconds > time) {
     
148.         return index - 1;
     
149.       }
     
150.     }
     
151.   }
     
152.   aud.ontimeupdate = setPosition;
     
153.   let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
154.   aud.addEventListener('pause', () => mState());
     
155.   aud.addEventListener('playing', () => mState());
     
156.   mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
     
157. </script></td></tr></table>

复制代码

微尘

1. 
   
2. <div style="width:1420px; height:744px; position:absolute;left:50%; transform:translate(-50%); margin-top:80px;">
   
3. <img src="https://cccimg.com/view.php/d89238bd404a065f2a92011c49859db5.jpg "
   
4. style="width:100%px; height:100%; ">
   
5. </div>
   
6. <audio src="http://music.163.com/song/media/outer/url?id=478513414.mp3  " autoplay loop></audio>
   
7. <div style="height: 800px;"></div>
   
8. </td></tr>
   
9. 
   
10. 当你老了

复制代码

愉快

[i=s] 本帖最后由 愉快 于 2024-11-29 19:55 编辑 [/i]

我能正常收看收听。播放正常。

愉快

已做修改，把错误的代码删除了。

丁香

1. https://bbs.ltxjob.com/data/attachment/forum/202412/06/074313hucd78i01vwkuwc1.jpg.thumb.jpg

复制代码

微尘

丁香 发表于 2024-11-26 13:55

丁香，我问你mp3音乐地址，怎么获得的。不知道你怎么了，回帖让我不理解的哦。

丁香

微尘 发表于 2024-11-27 19:52
丁香，我问你mp3音乐地址，怎么获得的。不知道你怎么了，回帖让我不理解的哦。 ...

现在回答你：我是把音乐地址，也就是分享里面的复   制链接，放进音画原创版块里的那个闲云老师推荐的：一款转换MP3的软件上，，获得的。

微尘

丁香 发表于 2024-11-28 07:19
现在回答你：我是把音乐地址，也就是分享里面的复   制链接，放进音画原创版块里的那个闲云老师推荐的： ...

明白了。抽空我去学习学的哦。谢谢你了。

风清

愉快 发表于 2024-11-19 19:05
本帖最后由 愉快 于 2024-11-19 19:06 编辑 丁香 发表于 2024-10-29 13:17本帖最后由 丁香 于 2024-11-16  ...

一哥好！欢迎您来影音坊发图，你的那个打不开，要按丁香的重新编辑一下！慢慢来！

愉快

风清 发表于 2024-11-28 11:28
一哥好！欢迎您来影音坊发图，你的那个打不开，要按丁香的重新编辑一下！慢慢来！ ...

我这里看上面41楼的是一句文字回复告诉丁香一声我能打开，能播放，有画面，有声音，因为我爬楼看见别的朋友都在说打不开，所以我反馈一下，我这里是正常播放的，

42楼，我是学习了丁香的代码，试了一下，有画面的，但是无声，画面显示却又不是丁香的视频内容，却是一个动画的宝塔画面。我想可能是丁香发主题帖时候的原始模板，丁香在内容上换了丁香自己选定的，她最后的作品就是主题帖的內容了，而我试试，却试出了她的原始来源。
我之所以没有删除，是留着，丁香和其他玩发代码音画者可能可以有参考作用，所以就没有删除。

那么这样。版主，或管理人员，或是楼主丁香，都可以整理帖子和版面，你们都可以有权决定帖子的去留，觉得需要删除，删好了，我知道了，也明白和同意。
如果觉得“不妥”，那么可在这里留言通知我，我明天晚上进来我自己删。好吗？
谢谢对我的周到细心服务。1，拜托，我同意，管理可以直接删除不合适的内容。2，留言通知我，我明天自己删除。
（我之所以今晚没有删除，是害怕会造成误会 是我发脾气了，所以我宁愿迟一天，先把话说明白后，明天我看见通知，我自己删。如果明天上来看见41楼42楼都已经删除了，那就是已经帮我删掉了。那我就这里留言说“谢谢”哈）

论坛有这样的交流，很有活力哦。