论坛 › 人机音画视频 › 《雍正王朝》主题曲-刘欢

万顷湖 发表于 2026-6-16 05:17

《雍正王朝》主题曲-刘欢

<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://cccimg.com/view.php/4b84a90c19eadaba84630ca736d901e0.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://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) 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="8" height=620>

<img alt="" src="https://cccimg.com/view.php/d4bbfffabb621b877d8319b2c7eafd0f.jpg" title="" style="width: 1186px;height: 620px;" />

<img alt="" src="https://cccimg.com/view.php/215aea015eb38cfca5221115759c7dd6.jpg" title="" style="width: 1186px;height: 620px; transform: rotateY(180deg);"/>

<img alt="" src="https://cccimg.com/view.php/93b10d86049ee067a55d1894c5311ecb.jpg" title="" style="width: 1186px;height: 620px;" />

<img alt="" src="https://cccimg.com/view.php/38950bfba67b197f80f310918f4a518a.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" />

<img alt="" src="https://cccimg.com/view.php/d4bbfffabb621b877d8319b2c7eafd0f.jpg" title=""style="width: 1186px;height: 620px;"/>

<img alt="" src="https://cccimg.com/view.php/3c418f885173e89c5c3a1d655be3942f.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg); "/>

<img alt="" src="https://cccimg.com/view.php/93b10d86049ee067a55d1894c5311ecb.jpg" title="" style="width: 1186px;height: 620px;" />

<img alt="" src="https://cccimg.com/view.php/38950bfba67b197f80f310918f4a518a.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://cccimg.com/view.php/a6922f815035355de2f22153f4cd4888.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://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {

aud.pause();m.stop();m4.stop();m1.stop();m2.stop();m3.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 = `



普天之下-莫非王土
数英雄 论成败
古今谁能说明白
千秋功罪任评说
海雨天风独往来
一心要江山图治垂青史
也难说身后骂名滚滚来
有道是人间万苦人最苦
终不悔九死落尘埃
轻生死 重兴衰
百年一梦多慷慨
九州方圆在民心
斩断情丝不萦怀
谁不想国家昌盛民安乐
也难料恨水东逝归大海
有道是得民心者得天下
看江山由谁来主宰
得民心者得天下
看江山由谁来主宰
得民心者得天下
看江山由谁来主宰

`;
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-6-16 08:18

见到老师的作品很高兴！早上问好!{:4_187:}

梦江南 发表于 2026-6-16 08:20

大图无缝来回移动自由，歌曲激昂，为老师点赞！{:4_199:}

万顷湖 发表于 2026-6-16 09:14

班门弄斧，多谢提携。

红影 发表于 2026-6-16 18:17

这首歌曲很霸气，图片的选择也很相符，这帖子真好。
给万顷湖点赞{:4_187:}

万顷湖 发表于 2026-6-16 19:27

班门弄斧，多谢鼓励。

查看完整版本: 《雍正王朝》主题曲-刘欢