论坛 › 人机音画视频 › 一家人-刀郎&云朵

万顷湖 发表于 2026-8-22 12:36

一家人-刀郎&云朵

<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/08/21/6a883e16ccf93.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://cccimg.com/view.php/3602392d4b5f1724dc20ca4d10194c9d.gif) no-repeat 0px 0px/cover;width:50px;height: 50px;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/08/21/6a883e98d78be.jpg"title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883ecad8f16.jpg"title="" style="width: 1186px;height: 620px; transform: rotateY(180deg);"/>
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883fb248f42.jpg"title="" style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883e98d78be.jpg"title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" />
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883e5b93b9b.jpg"title="" style="width: 1186px;height: 620px;"/>
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883fe0892b6.jpg"title=""style="width: 1186px;height: 620px;transform: rotateY(180deg); "/>
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883efed18be.jpg"title=""style="width: 1186px;height: 620px;" />
<img alt="" src="https://free.picui.cn/free/2026/08/21/6a883e5b93b9b.jpg"title=""style="width: 1186px;height: 620px;transform: rotateY(180deg);" />
</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/157927.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/33325bbfc048bcedcf55c828cd1abf58.jpg) 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/b2176a6273fc40f5fb32ec2ed578cd3e.jpg) 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>

红影 发表于 2026-8-22 13:41

这样的帖子让人感叹，刀郎和云朵十多年前就分了。
欣赏万顷湖老师好帖{:4_199:}

万顷湖 发表于 2026-8-22 14:21

红影 发表于 2026-8-22 13:41
这样的帖子让人感叹，刀郎和云朵十多年前就分了。
欣赏万顷湖老师好帖

都是一流歌手！好像他们是真正的师徒，曾经的战友。谢谢关注，谢谢扶助。

梦江南 发表于 2026-8-22 15:40

云朵是刀郎的弟子，不知为什么分开了。

梦江南 发表于 2026-8-22 15:41

欣赏万老师的好帖子。{:4_187:}

梦油 发表于 2026-8-22 16:57

欣赏精彩制作，祝福万顷湖快乐。

查看完整版本: 一家人-刀郎&云朵