远山少年 (DJ默涵版)【动图控制尝试，动图限<5M】
本帖最后由 亚伦影音工作室 于 2025-9-11 19:03 编辑 <br /><br /><style>#papa{margin: 10px -300px;
width: 1186px;
height: 620px;
background:#800000 url('https://pic1.imgdb.cn/item/68c2a67d58cb8da5c89d7ab8.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345; }
#source{width:100%;height: 100%;position:absolute;left: 0px; top:0px;}
#source img{width:100%;height: 100%;}
canvas{mix-blend-mode: lighten;cursor: pointer; }
.lrc { z-index: 1; position: absolute; top: 20%; left: 1%; width: 760px; 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: normal 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: #FF6600; font-weight: 650; text-shadow: 1px 1px 0px #000; }
</style>
<divid="papa">
<img id="source" src="https://pic1.imgdb.cn/item/68c296ca58cb8da5c89ce2cd.gif">
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://xlaj.cn/upfile/2025/02/16/yssn.m4a" loop autoplay ></audio>
<script>
const renderGif = function (dom) {
if (!dom || !dom.src) {
return;
}
// gif图片的url地址
const src = dom.src;
// 创建的用来播放gif的canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext("2d");
// 一些与GIF播放有关的变量
let imageDecoder = null;
let imageIndex = 0;
let paused = false;
// 绘制方法
const renderImage = function (result) {
context.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
// 如果播放结束，从头开始循环
if (imageDecoder.complete) {
if (track.frameCount === 1) {
return;
}
if (imageIndex + 1 >= track.frameCount) {
imageIndex = 0;
}
}
// 绘制下一帧内容
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) => {
if (paused === false) {
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1200.0);
} else {
canvas.nextResult = nextResult;
}
})
.catch((e) => {
// imageIndex可能超出的容错处理
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
};
// 判断地址能够请求
fetch(src).then((response) => {
// 可以请求，进行样式处理
// 设置canvas尺寸
canvas.width = dom.naturalWidth;
canvas.height = dom.naturalHeight;
// 实际显示尺寸
canvas.style.width = dom.clientWidth + 'px';
canvas.style.height = dom.clientHeight + 'px';
// 隐藏图片，显示画布
dom.after(canvas);
dom.style.position = 'absolute';
dom.style.opacity = '0';
// 将GIF绘制在canvas上
imageDecoder = new ImageDecoder({
data: response.body,
type: "image/gif"
});
// 解析第一帧并绘制
imageDecoder.decode({
frameIndex: imageIndex
}).then(renderImage);
});
// 事件绑定处理
dom.addEventListener('click', function () {
if (paused) {aud.play();
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();
paused = true;
}
});
canvas.addEventListener('click', function () {
if (paused) {aud.play();
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();
paused = true;
}
});
};
renderGif(source);
</script>
<script>
let lrc = `
远山少年 (DJ默涵版)
作词：余有所悸
作曲：苏二墨
风儿它轻轻转 穿过绵延的高山
吹过乡间屋檐 吹到少年的双肩
城市灯火阑珊 经过多少风寒
你看 日出多晃眼 日落在人间
他捧着一只碗
吃过百家的饭
破衣破鞋破帽衫
蝴蝶起舞翩翩
落在他的指尖
为何长大 那么遥远
他挑着重重的扁担
柴没把他背压弯
握笔的手上 有着厚厚的茧
他用袖口擦掉 额头沾着土的汗
憧憬着能走出这深山
风儿它轻轻转 穿过绵延的高山
吹过乡间屋檐 吹到少年的双肩
城市灯火阑珊 经过多少风寒
你看 日出多晃眼 日落在人间
。。。。。。
他捧着一只碗
吃过百家的饭
破衣破鞋破帽衫
蝴蝶起舞翩翩
落在他的指尖
为何长大 那么遥远
他挑着重重的扁担
柴没把他背压弯
握笔的手上 有着厚厚的茧
他用袖口擦掉 额头沾着土的汗
憧憬着能走出这深山
风儿它轻轻转 穿过绵延的高山
吹过乡间屋檐 吹到少年的双肩
城市灯火阑珊 经过多少风寒
你看 日出多晃眼 日落在人间
风儿它轻轻转 穿过绵延的高山
吹过乡间屋檐 吹到少年的眉眼
夜晚繁星闪闪 在天际落满
人生缓缓路漫漫 自会有答案
谢谢欣赏
`;
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>
若动图不显示，请刷新！ 漂亮，这动图还能停在任意帧上的，这个制作真棒{:4_199:} 漂亮！如果能实现 多动图停在各自的任意帧就更完美了{:4_190:} 音乐劲爆 制作大气
页:
[1]