回不去的童年
本帖最后由 夕阳黄昏 于 2024-11-22 16:54 编辑 <br /><br /><style type="text/css">@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk {position:relative; width:800px;height:758px;margin:40px auto;background-color:hsl(0, 0, 80%);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#showSVG {width:800px; position:absolute;left:0; top:0;}
#processMeter {position: absolute; right:50px; bottom:-10px; width: 100px; height:100px; cursor: pointer;}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2em 微软雅黑;
pointer-events:none;
left:20%;bottom: -10px;
filter: drop-shadow(2px 0px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow(0px -2px 0px white);
}
.lrcShow::before {
color:hsl(0, 50%, 50%);
}
#oBlk {
width:700px;
height:700px;
overflow:hidden;
border-radius:24px;
box-shadow:4px 4px 10px black;
background-color:skyblue;
}
#pBlk {
width:600px;
height:578px;
position:relative;
margin:auto;
top:50%;
transform:translateY(-55%);
}
#pBlk div {
background-repeat:no-repeat;
float:left;
}
</style>
<div id="oBlk">
<div id='pBlk'></div>
<div id="processMeter">
<svg stroke-width="5" viewBox="0 0 150 150">
<!-- 背景圆形 -->
<circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
<text x="50%" y="50%" fill="#ffa020" text-anchor="middle" dominant-baseline="middle" stroke-width="1" style="font-size:24px;" id="procV">0%</text>
<!-- 进度条 -->
<circle class="process-circle" cx="75" cy="75" r="50" stroke="#ffa020" transform="rotate(-90 75 75)" fill="none" stroke-dasharray="314" stroke-dashoffset="314" style="stroke-dasharray: 313.652;"></circle>
</svg>
</div>
<div class="lrcShow" data-lrc="回不去的何止时间"></div>
</div>
<script type="text/javascript">
var pics = [
"https://img-volc.jianpian.info/14592807/article/20241122/ff19fecea4c54aca8de1e41b94f55314__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/57d744ae4d7e4cc183754de0aae09269__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b751bbd09d2d460c88759450672f9bff__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/e23018fe557649c993a3fbb671c54164__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/ca2eba34d58243d0880d4f9467c9cf7a__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/cd9b8973797a4a3a8ca1578e5a260447__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/20ce28db2eb7458e90215b7873f9d347__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/54362ab905a741d88340b1c3049846ae__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b1cd7fb769e047bbb63e23acdc788d99__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/d322431638a1400aa00d6ea9de72bbce__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/b6185a1675aa4e4fa873c9788498e276__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/fac910edf3bb4017b46bdfaaaafa2798__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/9fba72f05a45472995989b49f5dc9f3f__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/7016b0c2a507496d9ddf1be0c3da8438__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/829d37afc2b44f2e810a1871f0404fcb__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/f45846d15d18474991bb3c46c71dfc9f__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/f2309f772f4242dca06995e672155901__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/94c29a5e12df4bb69c5d088d87408865__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg",
"https://img-volc.jianpian.info/14592807/article/20241122/c1f4e33b486a43b8aca0c521034559b6__transed__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg"
];
let bw = pBlk.clientWidth / 20, bh = pBlk.clientHeight / 20;
let picIdx = 0;
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
var oDiv = document.createElement('div');
oDiv.style.backgroundImage = `url(${pics})`;
//oDiv.style.backgroundRepeat = `no-repeat`;
oDiv.style.backgroundPosition = -j * bw + 'px ' + (-i * bh) + 'px';
oDiv.style.width = bw + 'px';
oDiv.style.height = bh + 'px';
oDiv.style.transition = (0.3 + Math.random()) + 's';
//oDiv.style.float = 'left';
pBlk.appendChild(oDiv);
}
};
var allDiv = pBlk.querySelectorAll('div');
var t = null
let chgPic = () => {
let index = allDiv.length - 1;
picIdx++; picIdx %= pics.length;
t = setInterval(function() {
if (index == -1) {
clearInterval(t);
allDiv.forEach(aDiv => {
aDiv.style.opacity = 1;
aDiv.style.transform = 'translateY(0px)'
});
return;
}
allDiv.style.backgroundImage = `url(${pics})`;
allDiv.style.transform = 'translateY(200px)';
allDiv.style.opacity = 0;
index--;
}, 20);
setTimeout(chgPic, 15000);
}
chgPic();
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
const processCircle = document.querySelector('.process-circle');
// 获取圆的周长
const circumference = processCircle.getTotalLength();
// 把周长赋值给 strokeDasharray
processCircle.style.strokeDasharray = circumference;
function setProcessCircle(percent = 0) {
// 动态计算 offset 赋值给 strokeDashoffset
// 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
processCircle.style.strokeDashoffset =
circumference * (1 - parseInt(percent) / 100)
}
sf0.onload = () => {
let lrctxt = `
回不去的何止时间
原唱：陈墨一
风吹过发梢 回忆又在呼啸
泪划过眼角 殒落在人潮
你看不染一尘的回忆
也终不抵那时过境迁
曾熟悉的画面 这褪色的房间
回不去的何止时间
风又起叶落地 思念更浓郁
自别离未停息
想见你拥抱你 想再看看你
可惜已来不及
看折旧的相机 存泛黄的记忆
模糊谁的眼睛
人常说的过去 早就已回不去
远行的候鸟 何时会再回巢
来时的轨迹 怎会被抹掉
你看不染一尘的回忆
也终不抵那时过境迁
曾熟悉的画面 这褪色的房间
回不去的何止时间 风又起
你问我人长大哪部分强行被遮掩
倔强地站在冷风中问今夕又是何年
像姗姗来迟的观众
赶不上热播的影片
只能在回放中
一遍一遍找寻我们的情节
人喜欢瞻前顾后 总是喜新厌旧
放下的放不下的都是为了表面说说
我怀念着我怀念着我们能无话不说
可惜都过去了我们也都走散了
风又起
风又起叶落地 思念更浓郁
自别离未停息
想见你拥抱你 想再看看你
可惜已来不及
看折旧的相机 存泛黄的记忆
模糊谁的眼睛
人常说的过去 早就已回不去
人常说的过去 早就已回不去
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://cccimg.com/view.php/c270554433cf82d7bdb47a29a2374967.mp3",
}
let player = new lrcPlayerY(opts);
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
processCircle.style.strokeDashoffset =
circumference * (1 - processValue);
procV.textContent = parseInt(processValue * 100) + '%';
});
processMeter.onclick = () => {
player.mObj.paused ? player.mObj.play() : player.mObj.pause();
}
}
</script> 好奇妙的图片轮播方式，原图片被打碎了换上新图啊，真奇特{:4_187:} 那些过往场景，真的像被时间一层层敲碎了，遗落在时光的长河里了。
这样的轮播方式特别适合这个主题呢{:4_199:} 回不去的童年，回不去的那些街巷和欢乐的童年游戏，当年的小伙伴如今在何处？{:4_204:} “人们常说的过去，早就已回不去”，这歌曲也很让人感慨。
夕阳老师的帖子真好{:4_199:} 红影 发表于 2024-11-22 19:11
好奇妙的图片轮播方式，原图片被打碎了换上新图啊，真奇特
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-11-22 19:13
那些过往场景，真的像被时间一层层敲碎了，遗落在时光的长河里了。
这样的轮播方式特别适合这个主题呢{:4_ ...
换了个玩法{:5_106:} 红影 发表于 2024-11-22 19:14
回不去的童年，回不去的那些街巷和欢乐的童年游戏，当年的小伙伴如今在何处？
感慨时光一去不复返 本帖最后由 夕阳黄昏 于 2024-11-22 19:24 编辑
红影 发表于 2024-11-22 19:15
“人们常说的过去，早就已回不去”，这歌曲也很让人感慨。
夕阳老师的帖子真好https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp 效果特棒！{:4_204:} 东篱闲人 发表于 2024-11-22 19:48
效果特棒！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 记忆的碎片构成一幅幅那时的画面，既令人快乐，也令人伤感！ 樵歌 发表于 2024-11-22 19:54
记忆的碎片构成一幅幅那时的画面，既令人快乐，也令人伤感！
https://p1.meituan.net/dpgroup/10d72126b15239d559437cc3d63b33ed49859.gif 夕阳黄昏 发表于 2024-11-22 19:21
这效果简直太奇妙了{:4_199:} 夕阳黄昏 发表于 2024-11-22 19:22
换了个玩法
非常惊艳的轮播效果呢{:4_199:} 夕阳黄昏 发表于 2024-11-22 19:23
感慨时光一去不复返
是啊，这首歌这个轮播效果，还有所有的图图，都搭配得特别好{:4_199:} 红影 发表于 2024-11-23 08:30
这效果简直太奇妙了
还行吧。 红影 发表于 2024-11-23 08:31
非常惊艳的轮播效果呢
看看就好 夕阳黄昏 发表于 2024-11-22 19:23
图图里的文字也特别好，勾起了过往的回忆{:4_187:} 红影 发表于 2024-11-23 08:31
是啊，这首歌这个轮播效果，还有所有的图图，都搭配得特别好
这效果还有可改进的地方，如要求图片大小基本相同等。