十八梯
<meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk {
--w:600px;--h:900px;
width:var(--w);height:var(--h);
margin-left:calc(50% - 0.5 * var(--w));
overflow:hidden;
position:relative;
border-radius:32px;
box-shadow:4px 4px 10px black;
background:hsla(60, 50% , 80%, .4);
}
#oBlk img {
width:var(--w);height:var(--h);opacity:0;
position:absolute;left:0px;top:0px;
-webkit-mask-image: radial-gradient(black 20%, transparent 80%);
-webkit-mask-size: cover;z-index:1;
}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 楷体;
pointer-events:none;width:1.5em;height:80%;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
writing-mode: vertical-rl;z-index:99;left:5px;top:50px;color:hsla(240,60%, 90%, 0.7);
}
.lrcShow::before {
writing-mode: vertical-rl;
}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
#processMeter {position: absolute; right:3%; bottom:5px; width: 120px; height:60px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYRqEcHhZ9UVpxzDibNZnacc8KNRf9x3oMkWwBb4FicUyVwsjnopfFewWQ/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYjsknTDD9XwrNp8L5XOfs47EUBicldJ6B0W6j0YjfMz4HZFsXUib0zkSA/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYTQ2nqTAoc0tIjkhNGXxya9JKJp9EPEMHribRaku69pu2jzcJsn69VTQ/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYeJ0YZxW4CP9DEepjvPZTp3rHP9VLB3gkpicSRYqgoWIWQZ4HzW0EBUg/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYKtYLyJafFnibTbIV09K2KQCN8NJGL1G3U6oCTLPgYRrSNv46UI6WBlA/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYUTHf4JItcG4H0FaJ4YnS5DpELQIILIy5aIicvMsGwW2FPp0coKnw3cA/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYkXdARyFKe0v67wPcM3oOWx9GmLJly6s3a66oZVa90LzwVYvltOLM2g/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYskZQicEOu7FNYL9ibgUqMJiaFVuv1YzRHaCg03L5AEz7OJiavqg2wdbo2g/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYEcKuhyN8a7ibBePiaic6T3w86pyjZjuqx6932bSBpSFVZ6YBN8t64D0qg/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5VLiaYUibOmlwkfFz8qGlg6BYcnnxGQaa4Gia17BFK9F1NPHfR6UOUDuBhaIyh98j6hZMvicAiccaRfqFQ/640" alt="" /> <div id="processMeter">
<svg viewBox="0 0 200 100" id="svgObj">
<!-- 背景圆形 -->
<g stroke-width='8'>
<path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="lightblue"fill="none" ></path>
<!-- 进度条 -->
<path
id="fgc"
d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
stroke="darkred"
fill="none"
stroke-dasharray="455"
stroke-dashoffset="455"
></path>
</g>
<defs>
<clipPath id="clip">
<circle cx="100" cy="50" r="41" />
</clilpPath>
</defs>
<image xlink:href="https://p1.music.126.net/8_kQJ6SC3ghGLCvaD9jwXg==/109951166991273139.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g text-anchor="middle" dominant-baseline="middle" fill='black' style="font:bold 16px;">
<text x="82%" y="50%" id="durTime"> </text>
<text x="18%" y="50%" id="curTime"> </text>
</g>
</svg>
</div>
<div class="lrcShow" data-lrc="十八梯"></div>
</div>
<script>
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);
sf0.onload = () => {
const keyFrames =
[
[
[
{offset: 0.0, opacity:0,transform:'scale(0.3)'},
{offset: 0.5, opacity:1,transform:'scale(1.05)'},
{offset: 0.7, opacity:1,transform:'scale(0.9)'},
{offset: 1.0, opacity:1,transform:'scale(1)'}
],
[
{offset: 0.0, transform:'scale(1)'},
{offset: 0.25,transform:'scale(0.95)'},
{offset: 0.75,transform:'scale(1.1)'},
{offset: 1.0, opacity:0,transform:'scale(0.3)'}
]
],
[
[
{offset:0, opacity:0, transform:'translateY(-30%)'},
{offset:1, opacity:1, transform:'translateY(0)'}
],
[
{opacity:1, transform:'translateY(0)'},
{opacity:0, transform:'translateY(30%)'}
]
],
[
[
{offset:0, transformOrigin:'left bottom',transform:'rotate(-90deg)',opacity:0},
{offset:1, transformOrigin:'left bottom',transform:'rotate(0)', opacity:1}
],
[
{offset:0, transformOrigin:'right bottom',transform:'rotate(0)', opacity:1},
{offset:1, transformOrigin:'right bottom',transform:'rotate(-90deg)', opacity:0}
]
],
[
[
{offset:0, transform:'perspective(400px) rotateX(90deg)',opacity:0 },
{offset:.4, transform:'perspective(400px) rotateX(-10deg)' },
{offset:.7, transform:'perspective(400px) rotateX(10deg)' },
{offset:1, transform:'perspective(400px) rotateX(0)', opacity:1 }
],
[
{offset:0, transform:'perspective(400px) rotateX(0)', opacity:1},
{offset:1, transform:'perspective(400px) rotateX(90deg)', opacity:0}
]
],
[
[
{offset:0, transform:'translateY(1200px) scale(.7)',opacity:.7},
{offset:.8,transform:'translateY(0) scale(.7)', opacity:.7},
{offset:1, transform:'scale(1)', opacity:1}
],
[
{offset:0, transform:'scale(1)',opacity:1},
{offset:.2,transform:'translateY(0) scale(.7)',opacity:.7},
{offset:1, transform:'translateY(700px) scale(.7)',opacity:.7}
]
],
[ // Roll in/out
[
{offset:0, transform: 'translateX(-800px) rotate(-540deg)', opacity: 0 },
{offset:1, transform: 'translateX(0) rotate(0deg)', opacity: 1 }
],
[
{offset:0, transform: 'translateX(0) rotate(0deg)', opacity: 1 },
{offset:1, transform: 'translateX(-1000px) rotate(-540deg)', opacity: 0 }
]
],
[
[ // PuFF in/out
{offset:0, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 },
{offset:1, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 }
],
[
{offset:0, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 },
{offset:1, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 }
]
],
[ // scale-in/out-center
[
{offset:0, transform: 'scale(0)', opacity: 1 },
{offset:1, transform: 'scale(1)', opacity: 1 }
],
[
{offset:0, transform: 'scale(1)', opacity: 1 },
{offset:1, transform: 'scale(0)', opacity: 1 }
]
]
];
const EffectTiming =
[
{
duration: 2000,
iterations: 1,
delay: 0,
fill: 'forwards'
},
{
duration: 2000,
iterations: 1,
delay: 9000,
fill: 'forwards'
}
];
const lrctxt = `
十八梯
歌手：梦辰
上下半城，夕阳又初斜
层层叠叠，谁在写岁月
爬坡上坎，挥汗如雨的热烈
来来回回，欲言又止的离别
十八梯上，繁华的深夜
十八梯下，安静的长街
青涩少年，停下歇一歇
斑驳记忆，缓缓地重叠
黄桷树下，喝茶下棋的爷爷
衣裙飘扬，回眸一笑的姐姐
十八梯上，缤纷的季节
十八梯下，飘落的黄叶
我等你，在老街
这座城市难见到雪
冬天来得总会晚一些
我等你，在老街
上上下下千级石阶
归来时有怎样的情节
青涩少年，停下歇一歇
斑驳记忆，缓缓地重叠
黄桷树下，喝茶下棋的爷爷
衣裙飘扬，回眸一笑的姐姐
十八梯上，缤纷的季节
十八梯下，飘落的黄叶
我等你，在老街
这座城市难见到雪
冬天来得总会晚一些
我等你，在老街
上上下下千级石阶
归来时有怎样的情节
十八梯
在又一个缤纷的季节
我们的故事又会续写
没有一句对白
比别来无恙更贴切
念白：
别来无恙吗
我的老街
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=1808138166.mp3",
}
let lrcPlayer = new lrcPlayerY(opts);
let imgSet = document.querySelectorAll('#oBlk > img');
let aniObjs =
;
function chg_cur_pic() {
let aniIdx = parseInt(Math.random() * keyFrames.length);
let Idx = parseInt(Math.random() * imgSet.length);
for(let i = 0; i < EffectTiming.length; i++) {
if(aniObjs
) aniObjs
.cancel();
aniObjs
= imgSet
.animate(keyFrames
, EffectTiming
);
}
aniObjs
.onfinish = chg_cur_pic;
}
chg_cur_pic();
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints =
[];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),aniObjs.forEach(aObj => {if(aObj) aObj.pause()}))
: (mCtrl.style.setProperty('--rState','running'),aniObjs.forEach(aObj => {if(aObj) aObj.play()}));
}
// SVG viewBox 与 实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};
fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;
// 歌曲、歌词 及 动态元素 启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script> 漂亮的图片轮播效果。这样的歌曲陪着这样奇妙的图图，十分相符呢。
欣赏难难好帖{:4_199:} 上上下下千级的石阶，穿梭着时光的流转。{:4_187:} 红影 发表于 2024-12-9 10:56
漂亮的图片轮播效果。这样的歌曲陪着这样奇妙的图图，十分相符呢。
欣赏难难好帖
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-12-9 10:59
上上下下千级的石阶，穿梭着时光的流转。
这也是重庆的特色之一 切换随畅，老师当之无愧！ 亚伦影音工作室 发表于 2024-12-9 13:19
切换随畅，老师当之无愧！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
别的都不会{:5_102:} 老师这个是特效吧？ 很久没有玩音画了，看见老师的特效制作真好{:4_199:} 世外桃源 发表于 2024-12-9 17:28
老师这个是特效吧？
勉强算是吧 世外桃源 发表于 2024-12-9 17:29
很久没有玩音画了，看见老师的特效制作真好
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 起个网名好难 发表于 2024-12-9 10:59
不客气啊，问好难难{:4_187:} 起个网名好难 发表于 2024-12-9 11:11
这也是重庆的特色之一
这阶梯看着好高啊。 红影 发表于 2024-12-9 21:15
不客气啊，问好难难
https://p7.itc.cn/q_70/images03/20200902/c68aaa0ccb46469dadf9940a0cc9cf48.gif 红影 发表于 2024-12-9 21:15
这阶梯看着好高啊。
不然怎么成为特色景点的 起个网名好难 发表于 2024-12-10 06:23
唉，才周二啊，这周事情挺多，麻烦。 起个网名好难 发表于 2024-12-10 06:23
不然怎么成为特色景点的
每天这样上上下下够累的呢{:4_173:} 红影 发表于 2024-12-10 20:48
唉，才周二啊，这周事情挺多，麻烦。
好像还有摸鱼的机会嘛 红影 发表于 2024-12-10 20:49
每天这样上上下下够累的呢
天天走练出来了 起个网名好难 发表于 2024-12-10 20:51
好像还有摸鱼的机会嘛
一般是有机会就跑上来看看{:4_173:}