学习代码音画《烟雨江南》

咕咚来了

老谟深虑 发表于 2024-6-25 15:22
谢谢支持和评精鼓励，页面是有问题，我调了，也没有调到最好。下午好！
...

是向左多了。

老谟深虑

咕咚来了 发表于 2024-6-25 18:07
是向左多了。

       我再去调调。调后开始审核了。

咕咚来了

烟雨江南

咕咚来了

老谟，上面是我调整的，把向左调整为0就好了。

1. <div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:0px;MARGIN-top:50px;">
   
2. <style>
   
3. #tz { margin: 30px 0 30px calc(40% - 700px); width: 1400px; height: 800px; background: url('https://sirius.130014.xyz/2024/06/18/3-220929163459_.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
   
4. #lrc { position: absolute; left: 120px; top: 715px; font: normal 40px sans-serif; white-space: nowrap; color: Yellow; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
   
5. #player { position: absolute;top: 680px; left: calc(58% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gra**nt(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
   
6. #player::before, #player::after { position: absolute; content: ''; }
   
7. #player::before { width: var(--btnSize); height: var(--btnSize); top: calc(#FFA500 * -1 - 5px); background: url('https://pic.imgdb.cn/item/666c48a7d9c307b7e9370e89.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
   
8. #player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: #FFA500; pointer-events: none; }
   
9. .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
   
10. @keyframes rot { to { transform: rotate(360deg); } }
    
11. @keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
    
12. </style>
    
13. 
    
14. <div id="tz">
    
15.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=321939" autoplay loop></audio>
    
16.         <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
    
17.         <div id="lrc">烟雨江南</div>
    
18.         <div id="player" data-time="00:00 00:00"></div>
    
19. </div>
    
20. 
    
21. <script>
    
22. var vids = document.querySelectorAll('.vid');
    
23. var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
    
24. 
    
25. var lrcKey = 0;
    
26. 
    
27. var showLrc = () => {
    
28.         if(lrcKey >= lrcAr.length) return false;
    
29.         lrc.innerText = lrcAr[lrcKey][1];
    
30.         lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
    
31.         lrcKey ++;
    
32. };
    
33. 
    
34. var mState = () => {
    
35.         tz.style.setProperty('--state',['running','paused'][+aud.paused]);
    
36.         if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    
37. };
    
38. 
    
39. var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
    
40. 
    
41. aud.onplaying = aud.onpause = () => mState();
    
42. 
    
43. aud.onseeked = () => {
    
44.         for(var j = 0; j < lrcAr.length; j ++) {
    
45.                 if(aud.currentTime < lrcAr[j][0]) {
    
46.                         lrcKey = j - 1;
    
47.                         if(lrcKey < 0) lrcKey = 0;
    
48.                         break;
    
49.                 }
    
50.         }
    
51. };
    
52. 
    
53. aud.ontimeupdate = () => {
    
54.         player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
    
55.         player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
    
56.         if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr[lrcKey][0]) showLrc();
    
57. }
    
58. 
    
59. player.onclick = (e) => {
    
60.         if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
    
61.         if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
    
62. }
    
63. 
    
64. player.onmousemove = (e) => {
    
65.         if(e.offsetY < 0) {
    
66.                 if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
    
67.                         player.title = aud.paused ? '播放' : '暂停';
    
68.                         player.style.cursor = 'pointer';
    
69.                 }
    
70.         }else{
    
71.                 player.title = '调节进度';
    
72.                 player.style.cursor = 'pointer';
    
73.         }
    
74. };
    
75. 
    
76. var lrcAr = [['22.44','在江南绵绵的雨季里'],
    
77.         ['27.49','飘洒着濛濛的细雨'],
    
78.         ['32.58','如烟的杨柳在雨中沐浴'],
    
79.         ['38.43','杨柳缠绵雨的情意'],
    
80.         ['42.97','在青石铺就的街巷里'],
    
81.         ['48.30','流淌着道道的雨溪'],
    
82.         ['53.50','淡淡的炊烟在雨中升起'],
    
83.         ['59.80','夜雨沉醉春的旋律'],
    
84.         ['63.57','江南的雨柔柔的江南雨'],
    
85.         ['69.00','你用温情滋润着爱的春意'],
    
86.         ['74.40','江南的雨江南的秀丽'],
    
87.         ['79.72','一江春水梦幻迷离'],
    
88.         ['84.90','江南的雨柔柔的江南雨'],
    
89.         ['89.46','你用温情滋润着爱的春意'],
    
90.         ['94.67','江南的雨江南的秀丽'],
    
91.         ['100.22','一江春水梦幻迷离'],
    
92.         ['125.75','在江南绵绵的雨季里'],
    
93.         ['130.64','飘洒着濛濛的细雨'],
    
94.         ['136.69','如烟的杨柳在雨中沐浴'],
    
95.         ['141.79','杨柳缠绵雨的情意'],
    
96.         ['147.09','在青石铺就的街巷里'],
    
97.         ['151.63','流淌着道道的雨溪'],
    
98.         ['156.57','淡淡的炊烟在雨中升起'],
    
99.         ['162.44','夜雨沉醉春的旋律'],
    
100.         ['166.99','江南的雨柔柔的江南雨'],
     
101.         ['171.93','你用温情滋润着爱的春意'],
     
102.         ['178.59','江南的雨江南的秀丽'],
     
103.         ['183.57','一江春水梦幻迷离'],
     
104.         ['187.48','江南的雨柔柔的江南雨'],
     
105.         ['192.58','你用温情滋润着爱的春意'],
     
106.         ['198.50','江南的雨江南的秀丽'],
     
107.         ['203.67','一江春水梦幻迷离'],
     
108.         ['208.26','江南的雨江南的秀丽'],
     
109.         ['214.70','一江春水梦幻迷离']
     
110. ];
     
111. </script>
     
112. </div>
     
113. <div style="width: 100%;height: 980px;"> </div>
     
114. <p> </p>
     
115. <p> </p>
     
116. <p> </p>
     
117. <p> </p>
     
118. <p> </p>
     
119. <p> </p>

复制代码

咕咚来了

老谟深虑 发表于 2024-6-25 18:12
我再去调调。调后开始审核了。

我已经调整好了。

老谟深虑

咕咚来了 发表于 2024-6-25 18:29
我已经调整好了。

       谢谢老乡，我调错了，我调下面的数了 ，我没调上面的。

老谟深虑

咕咚来了 发表于 2024-6-25 18:29
我已经调整好了。

       我按你的已经修改了。

咕咚来了

老谟深虑 发表于 2024-6-25 18:40
我按你的已经修改了。

已经好了，我主要把向左偏移变成0，就是不向左移动，画面就好了。

老谟深虑

咕咚来了 发表于 2024-6-25 19:11
已经好了，我主要把向左偏移变成0，就是不向左移动，画面就好了。

       学习了。晚上好！

咕咚来了

老谟深虑 发表于 2024-6-25 18:36
谢谢老乡，我调错了，我调下面的数了 ，我没调上面的。

其他全正常，只有位置偏了。