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

杨帆发表于 2025-4-7 21:11

本帖最后由杨帆于 2025-4-9 12:53 编辑 <br /><br /><style>

   #papa { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(800px, 75vw, 1280px); height: clamp(450px, 75vh, 750px); background: #eee url('https://pic.imgdb.cn/item/668a84acd9c307b7e9437ddf.jpg') no-repeat center/cover;z-index: 1; }

   .zw { height: clamp(450px, 75vh, 750px); margin: 30px;--state: paused; z-index: 1;}

   #lrcDiv {writing-mode: vertical-rl;
--hlcolor: #FF44AA ;
position: absolute;top:1%; left:80%;
display: flex;
flex-direction: column;
gap: 6px;
width: 145px;
height: 650px;
overflow: hidden;
font: normal 18px/24px 'Microsoft YaHei', sans-serif;
text-align: center;
color:#FFBB66;
background: none;
   z-index:5;
}

#lrcDiv > p {
margin: 0;
padding: 0;
transition: .95s;
}
#lrcDiv > p.hlight {
color: var(--hlcolor);
font-size: 28px;
font-weight: bold;
}

#mplayer {z-index: 5;
--track: silver;
--prog: red;
--percent: 0;
display: flex;
left: 300px; top: 580px;
gap: 15px;
flex-direction: column;
align-items: center;
width: 650px;
background: none;
color: white;
padding: 15px;
position: absolute;
}

#btns-area {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 15px;
}

#btn-play {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
}

#btn-play:hover::after {
opacity: .7;
filter:alpha(opacity:.5);
}

#btn-play::after {
position: absolute;
content:'';
width: 100%;
height: 100%;
background: var(--prog);
clip-path: var(--clip);
}

#progDiv {z-index: 5;
width: 100%;
height: 10px;
background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
cursor: pointer;
}

.play {
--clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
--clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}

.vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .8;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none;
left:0px; top:0px;

}

</style>

<div id="papa">
<div class="zw"></div>
<div id="lrcDiv"></div>
<div id="mplayer">
   <div id="btns-area">
            <div id="time1">00:00</div>
            <div id="btn-play" class="pause"></div>
            <div id="time2">00:00</div>
   </div>
   <div id="progDiv"></div>
</div>
<video class="vid " src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" loop muted autoplay=""></video>
<audio src="https://cccimg.com/view.php/d05d8a08510c3c47ab212b4fa6668f52.mp3" autoplay loop></audio>
</div>
<script>
const mplayer = document.querySelector('#mplayer');
const aud = document.querySelector('audio');
const lrcDiv = document.querySelector('#lrcDiv');
const progDiv = document.querySelector('#progDiv');
const btnPlay = document.querySelector('#btn-play');
   const vids = document.querySelectorAll('video');

   let lrcAr = [], isFScreen = false, lineHeight;

   const getLrcAr = (text) => {
const ar = text.trim().split(/[\r\n]+/g);
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
let p = document.createElement('p');
p.textContent = result.trim();
lrcDiv.appendChild(p);

});
lrcAr.sort((a, b) => a - b);
};

const updatePlayerDatas = () => {
const percent = (aud.currentTime / aud.duration) * 100;
time1.innerText = formatTime(aud.currentTime);
time2.innerText = formatTime(aud.duration);
mplayer.style.setProperty('--percent', percent + '%');
for (let i = 0; i < lrcAr.length; i ++) {
const lrc = {time: lrcAr[ i ], text: lrcAr[ i ]};
const next = i < lrcAr.length - 1 ? lrcAr : null;
const p = lrcDiv.children[ i ];
if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
p.classList.add('hlight');
lrcDiv.scroll({left: 0, top: p.offsetTop - lrcDiv.offsetHeight / 2 + 12, behavior: 'smooth'});
} else {
p.classList.remove('hlight');
}
}
};

const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

const mState = () => {
if (aud.paused) {
btnPlay.className = 'play';
btnPlay.title = '点击播放';
playvids(false);
papa.style.setProperty('--state', 'paused');
} else {
btnPlay.className = 'pause';
btnPlay.title = '点击暂停';
playvids(true);
papa.style.setProperty('--state', 'running');
}
};

   const playvids = (flag) => {
if(!vids) return;
vids.forEach(vid => flag ? vid.play() : vid.pause());
};

progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

const lrc = `
时光匆匆如流水（Live 合唱版)-付飞社
词：未子夫
曲：李勇军
编曲：姜凯升
后期：鲁晓锋
和声：凌菲
制作人：李勇军工作室
OP：新创焦桐文化
【曲库专用】
来到人世间受苦又受累
尝尽了人生百般滋味
一路坎坷雨打又风吹
回首这半生我太过狼狈
春去秋来花开花枯萎
转眼我青丝已经成了灰
想找个地方好好醉一回
又害怕醉了没人可依偎
时光匆匆岁月如流水
往事随风一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆岁月如流水
人到了中年没路可以退
看遍了人间是是与非非
我若心碎谁给我安慰
谁给我安慰
春去秋来花开花枯萎
转眼我青丝已经成了灰
想找个地方好好醉一回
又害怕醉了没人可依偎
时光匆匆岁月如流水
往事随风一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆岁月如流水
人到了中年没路可以退
看遍了人间是是与非非
我若心碎谁给我安慰
谁给我安慰

`;

getLrcAr(lrc);

aud.addEventListener('timeupdate', updatePlayerDatas);
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />

杨帆发表于 2025-4-7 21:13

本帖最后由杨帆于 2025-4-7 21:27 编辑

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

红影发表于 2025-4-7 22:31

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

杨帆发表于 2025-4-7 22:34

本帖最后由杨帆于 2025-4-7 22:36 编辑

红影发表于 2025-4-7 22:31
好像没看到有歌词啊。这个我不懂了，跟在后面学习。
好的，我们一起请教马老师，好好学习天天向上。

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

红影发表于 2025-4-7 22:51

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

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

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

杨帆发表于 2025-4-7 22:56

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

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

梦江南 发表于 2025-4-8 08:56

歌曲很好听。

夕阳黄昏 发表于 2025-4-8 10:28

杨帆发表于 2025-4-8 13:49

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

呵呵，谢谢江南喜欢{:4_187:}

杨帆发表于 2025-4-8 13:51

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

辛苦了！谢谢夕阳黄昏老师{:4_190:}

红影发表于 2025-4-8 15:54

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

我对JS也不熟悉{:4_173:}

红影发表于 2025-4-8 15:56

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

这个歌词能正常演示了{:4_187:}

杨帆发表于 2025-4-8 16:11

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

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

红影发表于 2025-4-8 16:38

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

我的帖子基本全套用的{:4_173:}

杨帆发表于 2025-4-8 17:30

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

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

马黑黑 发表于 2025-4-8 18:40

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

帮你看了一下错误：

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

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

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

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

杨帆发表于 2025-4-8 19:37

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

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

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

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

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

马黑黑 发表于 2025-4-8 19:53

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

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

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

刷新有两种方式：

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

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

红影发表于 2025-4-8 20:58

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

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

杨帆发表于 2025-4-8 21:39

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

刷新有两种方式：

由衷感谢，谢谢马老师鼓励！{:4_191:}

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

页: [1] 2

花潮论坛's Archiver

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