我是你路过的风 演唱：音宝
本帖最后由 亚伦影音工作室 于 2025-7-8 17:44 编辑 <br /><br /><style>#papa { margin: 10px -300px; width: 1286px;height: 620px;background: url(https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg) 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: 0px0px;
-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: #000; 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: #000;position: absolute; top:12px; left: 0px;}
.end{color: #000;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">
<marqueeid="m"behavior="scroll"scrollamount="8"height=620>
<img src="https://pic1.imgdb.cn/item/686cbd4658cb8da5c8963cfc.webp"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://aod.cos.tx.xmcdn.com/storages/815c-audiofreehighqps/93/BE/GKwRIDoLy-7hACAAAAOTFRVB.m4a" 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 = `
我是你路过的风
演唱：音宝
作词： 音宝
作曲： 音宝
你来过在我的生命中
我爱过只是你的旧梦
走一程有多少感动
这一生就多少心痛
你来过在我的生命中
共看过故事里的霓虹
你只是我做过的梦
我是你路过的风
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> 奇妙的效果，谢谢亚伦老师经典分享{:4_190:} 欣赏佳作，问候亚伦。 这个很奇妙，好像人物走到当中时转身的，和原来的图图结合，做成了滚动效果。{:4_204:} 欣赏亚伦老师的精彩制作{:4_199:} 配乐移动大图，欣赏点赞！
本帖最后由 亚伦影音工作室 于 2025-7-9 20:51 编辑 <br /><br />
<p>点击GIF播放或暂停：</p>
<img id="source" src="https://pic1.imgdb.cn/item/6762a79fd0e0a243d4e61d89.gif" width="300" height="180">
<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 / 1000.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) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
canvas.addEventListener('click', function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
};
renderGif(source);
</script>
页:
[1]