牧场上的家-八只眼组合
本帖最后由 万顷湖 于 2026-8-17 06:47 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_485343"><div style="position: absolute; left:0px;width:100%;margin-top:120px;">
<style>
#papa { margin: width: 1286px;height: 620px;background: url( ) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; z-index: 1; position: relative;}
#reflect-right { width:100%;z-index: 2;
position:absolute;margin: 0px 0px;
-webkit-box-reflect:left;
}
.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: #FFFF00; 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: #FF0000; font-weight: 650; }
#bfq{position: absolute;width:450px;height: 50px;overflow: hidden; z-index: 20;left: 20%; top:90%;}
.start{color: #FFFF00;position: absolute; top:12px; left: 0px;}
.end{color: #FFFF00;position: absolute;top:12px; left: 33%;}
#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 15%; top: 0px;position: absolute;z-index: 20;cursor: pointer;}
</style>
<div id="papa">
<marquee id="m" behavior="scroll" scrollamount="8" height=620>
<img src="https://free.picui.cn/free/2026/08/17/6a82139bd9fff.jpg"id="reflect-right">
</marquee>
<div id="bfq">
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/156779.mp3" autoplay loop ></audio>
<script>
var music = document.getElementById('aud');
var m= document.getElementById('m');
var btn = document.getElementById('btn');
btn.onclick = function() {
if (aud.paused) {
aud.play();m.start();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {aud.pause();m.stop();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.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 = `
牧场上的家-八只眼组合
我的家在牧场
那儿有水牛游荡
还有快乐的小鹿和羚羊
那儿那么欢畅
那儿没有悲伤
辽阔天空多么晴朗
听河水潺潺
一直流向远方
水中沙石闪闪发光
一群美丽的天鹅
漂浮在水面上
像那梦中的仙女一样
家牧场我的家
那儿有快乐的小鹿和羚羊
那儿多么欢畅
那儿没有悲伤
辽阔天空多么晴朗
空气宁静清新
微风轻轻吹荡
送来阵阵迷人的清香
我永不离开我那美丽的牧场
她是我心中最爱的地方
当黄昏过去
夜幕笼罩大地
天上星星闪烁光芒
星空多么壮丽
令人无限神往
但是比不上我的牧场
家牧场我的家
那儿有快乐的小鹿和羚羊
那儿多么欢畅
那儿没有悲伤
辽阔天空多么晴朗
辽阔天空多么晴
朗-花潮论坛
"},"code":200}
`;
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;"></td></tr></table>
多声部的合唱，好听。视频制作很漂亮。
欣赏万顷湖好帖{:4_199:} https://img.soogif.com/0rIjPl4EnDGYyZ3SHLb6St3XlqGSfK1P.gif 红影 发表于 2026-6-19 21:37
多声部的合唱，好听。视频制作很漂亮。
欣赏万顷湖好帖
一心老来乐，无意子陵滩。跟着新潮走，自知难上难。谢谢指导。
也曾年轻 发表于 2026-6-20 07:30
一心老来乐，无意子陵滩。跟着新潮走，自知难上难。谢谢指导。
老师的视频做得漂亮，多声合唱另有一种韵味。欣赏点赞！问好！{:4_187:} 有您和各位的指导，开心，立正，敬礼！
万顷湖 发表于 2026-6-20 12:17
一心老来乐，无意子陵滩。跟着新潮走，自知难上难。谢谢指导。
只要有兴趣，一直做下去，难的也变不难了{:4_204:}
页:
[1]