无言的结局-李玲玉&刘欢
本帖最后由 万顷湖 于 2026-7-30 21:56 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_497175"><div style="position: absolute; left:0px;width:100%;margin-top:120px;">
<style>
#papa { margin: width: 1186px;height: 620px;background: url(https://free.picui.cn/free/2026/07/29/6a6993b00b6c1.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; z-index: 1; position: relative;}
.inmg{width:100%; height: 620px; position:absolute; TOP:0%;LEFT: 0%;}
.start{color: #fff;position: absolute; top:84%; left: 22%;}
.end{color: #fff;position: absolute;top:84%; left: 33%;}
#btn{background: url(https://free.picui.cn/free/2026/07/30/6a6b56d183904.png) no-repeat 0px 0px/cover;width:80px;height: 80px;left: 27%; top: 82%;position: absolute;z-index: 20;}
.lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #fff; font: 300 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #00FFaa; font-weight: 650; }
</style>
<div id="papa">
<div>
<marquee id="m" behavior="alternate" scrollamount="5" height=620>
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6994bc5ae71.jpg" title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6994da13bd4.jpg" title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6995c0f1bae.jpg" title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6995f532d28.jpg" title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6996b72cc5d.jpg" title="" style="width: 1186px;height: 620px;"/>
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6996ec80643.jpg" title=""style=" width: 1186px;height: 620px;"/>
<img alt="" src=“https://free.picui.cn/free/2026/07/29/6a6994192085c.jpg” title=""style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/07/29/6a6993f735595.jpg" title=""style="width: 1186px;height: 620px;" />
</marquee>
</div>
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/156363.mp3" autoplay loop ></audio>
<script>
var music = document.getElementById('aud');
var m= document.getElementById('m');
var m4 = document.getElementById('m4');var m1 = document.getElementById('m1');var m2 = document.getElementById('m2');var m3 = document.getElementById('m3');
var btn = document.getElementById('btn');
btn.onclick = function() {
if (aud.paused) {
aud.play();
m.start();m4.start();m1.start();m2.start();m3.start();
btn.style.background = 'url(https://cccimg.com/view.php/f780a9bbec399b5b1b633ff62af9c231.png) no-repeat 0px 0px/cover';
} else {
aud.pause();m.stop();m4.stop();m1.stop();m2.stop();m3.stop();
btn.style.background = 'url(https://cccimg.com/view.php/f780a9bbec399b5b1b633ff62af9c231.png) no-repeat 0px 0px/cover';
}
};
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
}, 1000)
</script>
<script>
let lrc = `无言的结局-李玲玉&刘欢
无言的结局-李玲玉&刘欢
无言的结局-李玲玉&刘欢
无言的结局-李玲玉&刘欢
曾经是对你说过 这是个无言的结局
随着那岁月淡淡而去
我曾经说过如果有一天 我将会离开你
脸上不会有泪滴
但我要如何 如何能停止再次想你
我怎么能够 怎么能够埋葬一切回忆
啊让我再看看你
让我再说爱你
别将你背影离去
分手时候说分手
请不要说难忘记
就让那回忆淡淡地随风去
也许我会忘记
也许会更想你
也许已没有也许
曾经是对你说过 这是个无言的结局
随着那岁月淡淡而去
我曾经说过如果有一天 我将会离开你
脸上不会有泪滴
但我要如何 如何能停止再一次想你
我怎么能够 怎么能够埋藏一切回忆
啊让我再看看你
让我再说爱你
别将你背影离去
分手时候说分手
请不要说难忘记
就让那回忆淡淡地随风去
也许我会忘记
也许会更想你
也许已没有也许
分手时候说分手
请不要说难忘记
就让那回忆淡淡地随风去
也许我会忘记 也许会更想你
也许已没有也许
花潮论坛
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#aud");
var ul = document.querySelector("#ul");
var container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData.trim()
}
result.push(obj);
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
return i - 1;
}
}
return result.length - 1;
}
function createElements() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
li.addEventListener("click", function () {
audio.currentTime = result.time;
setOffset();
});
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
function setOffset() {
const index = getIndex();
if (index < 0) return;
const liHeight = ul.children?.clientHeight || 50;
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
offset = Math.max(minOffset, Math.min(offset, maxOffset));
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (index < ul.children.length) {
ul.children.classList.add('active');
}
}
audio.addEventListener("timeupdate", setOffset);
</script>
</div>
<div style="height:960px;"></div>
</td></tr></table>
哇塞，超大滚动篇幅，老歌老情怀，好看也好听 漂亮的制作。欣赏万顷湖老师好帖{:4_199:} 宕.. 发表于 2026-7-30 22:13
哇塞，超大滚动篇幅，老歌老情怀，好看也好听
谢谢鼓励，立正，敬礼！
红影 发表于 2026-7-30 22:15
漂亮的制作。欣赏万顷湖老师好帖
谢谢鼓励。立正，敬礼！
万顷湖 发表于 2026-7-30 22:27
谢谢鼓励，立正，敬礼！
哈哈，立正，回礼！ 万顷湖 发表于 2026-7-30 22:28
谢谢鼓励。立正，敬礼！
客气了，问好万顷湖老师{:4_187:}
页:
[1]