竖排歌词不滚动，请马老师让它动起来，谢谢[已解决]

杨帆

00:00

00:00

杨帆

竖排歌词不滚动，请马老师让它动起来，由衷感谢 @马黑黑

红影

好像没看到有歌词啊。这个我不懂了，跟在后面学习。

杨帆

红影 发表于 2025-4-7 22:31
好像没看到有歌词啊。这个我不懂了，跟在后面学习。

好的，我们一起请教马老师，好好学习天天向上。

不知为何预览正常，发在论坛就不显示了，按钮也无法点击。@马黑黑

红影

杨帆 发表于 2025-4-7 22:34
好的，我们一起请教马老师，好好学习天天向上。

不知为何预览正常，发在论坛就不显示了，按钮也无法点 ...

好像在本地预览的时候也只前几句能看到，同样不滚动啊。你这个不是用黑黑封装的代码做的？

杨帆

红影 发表于 2025-4-7 22:51
好像在本地预览的时候也只前几句能看到，同样不滚动啊。你这个不是用黑黑封装的代码做的？

是的，马老师的封装的源代码，但不清楚JS都代表什么意思

梦江南

歌曲很好听。

夕阳黄昏

1. <style>
   
2. @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
   
3.         #papa { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(800px, 75vw, 1280px); height: clamp(450px, 75vh, 740px); background: #eee url('https://pic.imgdb.cn/item/668a84acd9c307b7e9437ddf.jpg') no-repeat center/cover;z-index: 1; }
   
4.       
   
5.        .zw { height: clamp(450px, 75vh, 740px); margin: 30px;--state: paused; z-index: 1;}
   
6. 
   
7.        #lrcDiv {writing-mode: vertical-rl;
   
8.         --hlcolor: #FF44AA ;
   
9.         position: absolute;top:5%; right:15%;
   
10.         display: flex;
    
11.         flex-direction: column;
    
12.         gap: 6px;
    
13.         width: 165px;
    
14.         height: 650px;
    
15.         overflow: hidden;
    
16.         font: normal 18px/24px 'Microsoft YaHei', sans-serif;
    
17.         text-align: center;
    
18.         color:#FFBB66;
    
19.         background: none;
    
20.         z-index:5;
    
21. }
    
22. 
    
23. #lrcDiv > p {
    
24.         margin: 0;
    
25.         padding: 0;
    
26.         transition: .95s;
    
27. }
    
28. #lrcDiv > p.hlight {
    
29.         color: var(--hlcolor);
    
30.         font-size: 28px;
    
31.         font-weight: bold;
    
32. }
    
33. 
    
34. #mplayer {z-index: 5;
    
35.         --track: silver;
    
36.         --prog: red;
    
37.         --percent: 0;
    
38.         display: flex;
    
39.         left: 300px; top: 600px;
    
40.         gap: 15px;
    
41.         flex-direction: column;
    
42.         align-items: center;
    
43.         width: 650px;
    
44.         background: none;
    
45.         color: white;
    
46.         padding: 15px;
    
47.         position: absolute;
    
48. }
    
49. 
    
50. #btns-area {
    
51.         width: 100%;
    
52.         display: flex;
    
53.         justify-content: space-between;
    
54.         margin-top: 15px;
    
55. }
    
56. 
    
57. #btn-play {
    
58.         width: 20px;
    
59.         height: 20px;
    
60.         cursor: pointer;
    
61.         position: relative;
    
62. }
    
63. 
    
64. #btn-play:hover::after {
    
65.         opacity: .7;
    
66.         filter:alpha(opacity:.5);
    
67. }
    
68. 
    
69. #btn-play::after {
    
70.         position: absolute;
    
71.         content:'';
    
72.         width: 100%;
    
73.         height: 100%;
    
74.         background: var(--prog);
    
75.         clip-path: var(--clip);
    
76. }
    
77. 
    
78. #progDiv {z-index: 5;
    
79.         width: 100%;
    
80.         height: 10px;
    
81.         background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
    
82.         cursor: pointer;
    
83. }
    
84. 
    
85. .play {
    
86.         --clip: polygon(10% 0, 100% 50%, 10% 100%);
    
87. }
    
88. 
    
89. .pause {
    
90.         --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
    
91. }
    
92. 
    
93. </style>
    
94. <div id="papa">
    
95. <audio src="https://cccimg.com/view.php/d05d8a08510c3c47ab212b4fa6668f52.mp3" autoplay loop></audio>
    
96. </div>
    
97. <div class="zw"></div>
    
98. 
    
99. <script type="module">
    
100. import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';const mplayer = document.querySelector('#mplayer');
     
101. const lrc = `
     
102. [00:00.00]时光匆匆如流水（Live 合唱版)-付飞社
     
103. [00:03.83]词：未子夫
     
104. [00:07.66]曲：李勇军
     
105. [00:11.49]编曲：姜凯升
     
106. [00:15.32]后期：鲁晓锋
     
107. [00:19.15]和声：凌菲
     
108. [00:22.98]制作人：李勇军工作室
     
109. [00:26.81]OP：新创焦桐文化
     
110. [00:30.64]【曲库专用】
     
111. [00:34.47]来到人世间受苦又受累
     
112. [00:42.00]尝尽了人生百般滋味
     
113. [00:49.53]一路坎坷雨打又风吹
     
114. [00:57.03]回首这半生我太过狼狈
     
115. [01:04.50]春去秋来 花开花枯萎
     
116. [01:11.97]转眼我青丝 已经成了灰
     
117. [01:19.47]想找个地方 好好醉一回
     
118. [01:27.06]又害怕醉了没人可依偎
     
119. [01:34.50]时光匆匆 岁月如流水
     
120. [01:42.00]往事随风 一去不再回
     
121. [01:49.56]不知不觉容颜已憔悴
     
122. [01:57.06]我这辈子遭了太多罪
     
123. [02:04.47]时光匆匆 岁月如流水
     
124. [02:12.03]人到了中年 没路可以退
     
125. [02:19.53]看遍了人间是是与非非
     
126. [02:27.06]我若心碎 谁给我安慰
     
127. [02:32.43]谁给我安慰
     
128. [03:12.00]春去秋来 花开花枯萎
     
129. [03:19.47]转眼我青丝 已经成了灰
     
130. [03:26.97]想找个地方 好好醉一回
     
131. [03:34.53]又害怕醉了没人可依偎
     
132. [03:41.94]时光匆匆 岁月如流水
     
133. [03:49.47]往事随风 一去不再回
     
134. [03:57.03]不知不觉容颜已憔悴
     
135. [04:03.69]我这辈子遭了太多罪
     
136. [04:11.91]时光匆匆 岁月如流水
     
137. [04:19.50]人到了中年 没路可以退
     
138. [04:27.00]看遍了人间是是与非非
     
139. [04:34.53]我若心碎 谁给我安慰
     
140. [04:40.08]谁给我安慰
     
141. `;
     
142. hcplay(papa,lrc,7);
     
143. </script>

复制代码

直接套用就好。

杨帆

梦江南 发表于 2025-4-8 08:56
歌曲很好听。

呵呵，谢谢江南喜欢

杨帆

夕阳黄昏 发表于 2025-4-8 10:28
直接套用就好。

辛苦了！谢谢夕阳黄昏老师

红影

杨帆 发表于 2025-4-7 22:56
是的，马老师的封装的源代码，但不清楚JS都代表什么意思

我对JS也不熟悉

红影

夕阳黄昏 发表于 2025-4-8 10:28
直接套用就好。

这个歌词能正常演示了

杨帆

红影 发表于 2025-4-8 15:54
我对JS也不熟悉

是，不是一下能够掌握的，好在作为娱乐套用也是个办法

红影

杨帆 发表于 2025-4-8 16:11
是，不是一下能够掌握的，好在作为娱乐套用也是个办法

我的帖子基本全套用的

杨帆

红影 发表于 2025-4-8 16:38
我的帖子基本全套用的

是，适当套用就好，可全套会失去探索过程的乐趣

马黑黑

杨帆 发表于 2025-4-7 21:13
竖排歌词不滚动，请马老师让它动起来，由衷感谢 @马黑黑

帮你看了一下错误：

一、在 discuz 论坛，所有的数组下标用变量 i 写的时候， 都应写成 [ i ]，就是说字母 i 的两头都得有空格，否则会被论坛 ubb 化，变成斜体标志，从而破坏原始代码；

二、mState 函数中，有两句代码用于处理视频播放，你的帖子没有提供对应函数 playvids ，或是帖子不需要视频所以没有将函数拷贝过来。这两句因此应删掉或注释掉；

三、你的帖子容器id为 papa，而JS处理一些事项时，用的是 pa 句柄，这会让 js 找不到要操作的元素，报错。

已经帮你编辑，只是改掉错误部分。

杨帆

马黑黑 发表于 2025-4-8 18:40
帮你看了一下错误：

一、在 discuz 论坛，所有的数组下标用变量 i 写的时候， 都应写成 [ i ]，就是说 ...

歌词不显示以及按钮无法点击的问题终于得到解决了，由衷感谢马老师

由衷感谢马老师百忙中帮我修正错误，让我又学到很多有用的知识，解决了困扰我好久的问题

我把处理视频的代码也拷贝过来了，也修改了 pa 句柄，可歌词依然不会滚动呀，还望马老师抽空帮助解决，十分感激

马黑黑

杨帆 发表于 2025-4-8 19:37
歌词不显示以及按钮无法点击的问题终于得到解决了，由衷感谢马老师

由衷感谢马老师百忙中帮 ...

你已经成功地修复了问题，你刷新一下就好。

刷新有两种方式：

其一，软刷新，按F5或点击浏览器工具条上的刷新按钮；
其二，硬刷新，Ctrl + F5。

软刷新刷新本地更新过的东东，硬刷新刷新来自第三方资源或同一站点不用目录、页面的资源。本帖，软刷新可一解决问题，因为你修复的是页面内的东东。

红影

杨帆 发表于 2025-4-8 17:30
是，适当套用就好，可全套会失去探索过程的乐趣

是啊，适当套用，该修改还是要自己修改，并在其中领会，这样也是学习过程呢。

杨帆

马黑黑 发表于 2025-4-8 19:53
你已经成功地修复了问题，你刷新一下就好。

刷新有两种方式：

由衷感谢，谢谢马老师鼓励！

我多次点刷新按钮，可只有前5句，看不到第6句及以后的歌词呀