你给的回忆最伤最痛(心碎版)-顾语涵【多动图控制】
本帖最后由 亚伦影音工作室 于 2026-5-11 12:53 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa{margin: 10px -300px;
width: 1186px;
height: 680px;
background:#000 url() no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #002200;
position: relative;overflow: hidden;
z-index: 12345;}
#d{width: 45% ;height: 45%;position:absolute;left: 53%; top:62%;z-index: 2;}
#source{width: 100% ;}
#d1{width:100%;height: 100%;position:absolute;left: 0%; top:0%;z-index: 1;}
#source1{width:100%;height: 100%;border-radius: 0%;}
#d2{width:50%;height:50%;position:absolute;left: 2%; top:10%;z-index: 2;opacity:0.85;border-radius: 50%;}
#source2{width:100%;}
#an{width: 15px ;height: 15px;position:absolute;left: 5%; top:12%;z-index: 99;background: url("https://pic1.imgdb.cn/item/69e342d1214d2a8a53d705f8.png") no-repeat center/cover;animation: rota 1s linear infinite ;cursor: pointer;}
@keyframes rota {to { filter: hue-rotate(360deg); }}
.lrc { z-index: 21; position: relative; top: 68%; left: 1%; width: 600px; height: 150px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #ccc; font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "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: #00aa00; font-weight: 300; }
#player{position:absolute;top: 5%;z-index: 99;
left: 87%;
width: 50px;
height: 50px;border-radius: 50px;
display: grid;background:#00ff00 url("https://pic1.imgdb.cn/item/680f595158cb8da5c8d2561a.png") no-repeat center/cover;
place-items: center;animation: rot 8s linear infinite ;cursor: pointer;}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#fullscreen{border-radius: 4px;position: absolute;
color:#ccc;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
border: none;
cursor: pointer;top: 15px;left: 3%;
}
</style>
<divid="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="d"><img id="source" src="https://pic1.imgdb.cn/item/69e2da1d087b33b46ad732e0.gif"><div id="player"title="暂停/播放"></div><div id="an" title="暂停/播放"></div></div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/676cc476d0e0a243d4ea71ce.gif"></div>
<divid="d2"><imgid="source2"src="https://pic1.imgdb.cn/item/6829abbe58cb8da5c8fb092c.gif"></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://static.oldkids.com.cn/upload/2026/04/18/blog_260855907_20260418100958279.mp3" 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('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
canvas.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
player.addEventListener('click', function () {
if (paused) {aud.play();player.style.animationPlayState = 'running';
an.style.animationPlayState = 'running';
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();player.style.animationPlayState = 'paused';
an.style.animationPlayState = 'paused';
paused = true;
}
});
an.addEventListener('click', function () {
if (paused) {aud.play();player.style.animationPlayState = 'running';
an.style.animationPlayState = 'running';
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();player.style.animationPlayState = 'paused';
an.style.animationPlayState = 'paused';
paused = true;
}
});
};
renderGif(source); renderGif(source1);renderGif(source2);
</script>
<script>
(function() {
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);
})();
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script>
把小播安放在音响上了，这设计很巧。
这么多动图，都很漂亮，也都能逐帧暂停。
欣赏亚伦老师好帖{:4_199:} 欣赏佳作，问候亚伦。 本帖最后由 杨帆 于 2026-4-18 15:33 编辑
为何网页可见，但本地预览看不到效果呢？
谢谢亚伦老师精彩示范逐帧暂停效果{:4_191:}
页:
[1]