重庆 -- 轻轨
本帖最后由 夕阳黄昏 于 2024-12-3 11:36 编辑 <br /><br /><meta name="referrer" content="never" /><style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--w:1200px;--h:800px;--zw:1080px;--zh:720px;--rState:running;}
#oBlk {width:var(--w); height:var(--h); position:relative;overflow:hidden;margin:90px 0 40px calc(50% - 681px); border-radius:24px;box-shadow:4px 4px 10px darkgray;}
.bPic {width:calc(var(--w) / 3);height:calc(var(--h) / 3);float:left;opacity:0.75;}
zxx-slide{width:var(--zw);height:var(--zh);position:absolute;left:60px;top:40px;background-color:lightgray;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;z-index:0; animation-duration:2s;animation-name: ;transition:1s;animation-play-state:paused;}
.zxx-slide-img{width:var(--zw);height:var(--zh);}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2em 微软雅黑;
pointer-events:none;
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);
bottom: -20px; left:30%;
}
.lrcShow::before {
color:hsl(0, 50%, 50%);
}
#processMeter {position: absolute; left:2%; bottom:0px; width: 160px; height:80px; 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 class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40YQdEPHE7BlxxBIa06Ido7FoF7ia6phrqq0H81C9E0Lv6JGCw3nn9msw/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40gxzYIXCzQlxabRQ6cialkNFmGXu5I3Lkq8EONXibYNLRLs57WU1f3icrA/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT409HNhpFlKcDJSnGs4mpgoDSOnHdYswUrmrFztc2q3enJy7kokkqoibLA/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT405TMm75rXTc5dR2AXTdaeg7go7rbEDIXmpxpLmaEibB86DH5A8NTATRg/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40YH0h3d5eG5FHQ9IELUjwHTvO3JYLjgArqlqzoskT1rS70fh7FUhp3A/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT4012pjZh1L43h3M6Npf1MfO8DPjAa4weMvywP2HfBfzuJr81HQ4evR9A/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40rOJMOGp97lbQBKLKSdpib4yShcUcMeSIBEjZoNia4bLxFzulAsIb16Tw/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40owXl42lZtSIHF9eqicaTKLGpABCb31iboKwrkoLiadrEzs3gmj7fv5PfA/640" alt="" />
<img class="bPic" src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40wicTfWRCxznJVzQ1xb8rhv9CUVCAa8gDibKbP9LLzjPeFibribTpHL7blg/640" alt="" />
<zxx-slide></zxx-slide>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<radialGradient r="0.8" id="rg">
<stop offset="0" stop-color="hsl(0, 50%, 70%)"></stop>
<stop offset="0.7" stop-color="hsl(60, 50%, 70%)"></stop>
<stop offset="1" stop-color="hsl(120, 50%, 70%)"></stop>
</radialGradient>
<path d="M 100 50 A 20 10 0 0 0 140 50 A 20 10 0 0 0 100 50 A 20 10 40 0 0 130.64177772475912 75.71150438746157 A 20 10 40 0 0 100 50 A 20 10 80 0 0 106.94592710667722 89.39231012048832 A 20 10 80 0 0 100 50 A 20 10 120 0 0 80 84.64101615137756 A 20 10 120 0 0 100 50 A 20 10 160 0 0 62.412295168563666 63.68080573302676 A 20 10 160 0 0 100 50 A 20 10 200 0 0 62.41229516856366 36.319194266973255 A 20 10 200 0 0 100 50 A 20 10 240 0 0 79.99999999999999 15.358983848622465 A 20 10 240 0 0 100 50 A 20 10 280 0 0 106.9459271066772 10.607689879511675 A 20 10 280 0 0 100 50 A 20 10 320 0 0 130.64177772475912 24.288495612538416 A 20 10 320 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
<g stroke-width="5">
<path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="#ebeef5" fill="none"></path>
<path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="darkred" fill="none"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="blue" style="font:bold 24px;">
<text x="82%" y="50%" id="durTime">00:00</text>
<text x="18%" y="50%" id="curTime">00:00</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 = () => {
let aniActNames = ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","flip","flipInX","flipInY","lightSpeedInRight","lightSpeedInLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","hinge","jackInTheBox","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft","slideInRight","slideInUp"];
let pics = [
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40YQdEPHE7BlxxBIa06Ido7FoF7ia6phrqq0H81C9E0Lv6JGCw3nn9msw/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40gxzYIXCzQlxabRQ6cialkNFmGXu5I3Lkq8EONXibYNLRLs57WU1f3icrA/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT409HNhpFlKcDJSnGs4mpgoDSOnHdYswUrmrFztc2q3enJy7kokkqoibLA/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT405TMm75rXTc5dR2AXTdaeg7go7rbEDIXmpxpLmaEibB86DH5A8NTATRg/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40YH0h3d5eG5FHQ9IELUjwHTvO3JYLjgArqlqzoskT1rS70fh7FUhp3A/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT4012pjZh1L43h3M6Npf1MfO8DPjAa4weMvywP2HfBfzuJr81HQ4evR9A/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40rOJMOGp97lbQBKLKSdpib4yShcUcMeSIBEjZoNia4bLxFzulAsIb16Tw/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40owXl42lZtSIHF9eqicaTKLGpABCb31iboKwrkoLiadrEzs3gmj7fv5PfA/640",
"https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5Vf1eWBt9ibBjibMW5L8yLT40wicTfWRCxznJVzQ1xb8rhv9CUVCAa8gDibKbP9LLzjPeFibribTpHL7blg/640"
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
let aObj = document.createElement('a');
aObj.className = 'zxx-slide-a';
let imgObj = document.createElement('img');
imgObj.src = pic;
imgObj.className = 'zxx-slide-img';
aObj.appendChild(imgObj);
eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
let timerSlide = null;
let indexSlide = 0;
// 对应的元素
let eleSlides = [].slice.call(container.querySelectorAll('a'));
let eleButtons = [].slice.call(container.querySelectorAll('button'));
let funSlide = function() {
eleSlides.forEach(function(slide, index) {
if (!mPlayer.mObj.paused) {
if (indexSlide == index) {
let aniIdx = parseInt(Math.random() * aniActNames.length);
slide.style.zIndex = 1;
slide.style.animationName = aniActNames;
slide.style.animationPlayState = 'running'
} else {
slide.style.zIndex = 0;
slide.style.animationName = '';
slide.style.animationPlayState = 'paused'
}
}
});
timerSlide = setTimeout(function() {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 12000);
}
indexSlide++;
setTimeout(funSlide, 12000);
});
// 同步歌词
let lrctxt = ` 重庆 -- 轻轨\n 像列车穿过了地下我们的声音在飞驰\n 风雨到来的时候会把每一张脸都吹湿\n 每次准时到达 在每个地点永远不推迟\n 在这场赌桌 Right now I got triple Ace\n 每句歌词 每个韵脚 是我最闪亮的配饰\n LitXu with no leash I put ice on my wrist\n Mic cut my hair like baber 划过的推子\n 不得去找借口 流下的汗水不是该背时\n 坐上老轻轨\n 不停往前就像工程的音轨\n 喝了点冰水\n Hot Shit 降临重庆的经纬\n 天上在俯冲\n 捕食猎物张开的鹰嘴\n 时间都还早\n 那斗看哈我有好经背\n 目的地一直在闪 隧道里变成一片漆黑\n 看到光的时候前面又变成另一片景色\n 我的歌词和伴奏每天都在不停的亲热\n My soul gold blooded 重庆的血统他也含有金色\n 都说了换人\n 就列车到站必须要换乘\n 没打出弹痕\n 再老的辈份也不是万能\n 这场马拉松坚持不下去个人就去跑去半程\n 从小学到的道理 就是人不犯我 我不犯人\n 哥几个终于到达这场比赛的起跑线\n 我依然晓得都是必须经历的考验\n 要做好所有准备完成前提的条件\n 重庆的轨道今年又要新增几条线\n 穿梭在江上我们一起搭起全新的桥梁\n Rookie Season 即使现在我们依然很渺茫\n 所有人跑到成都 勒圈子都要开始逃亡\n 勒是雾都 我的家乡 它从来都不是个牢房\n 看新老在交叉 前浪和后浪思维在汇聚\n 看新血在融入 你不得行那斗该退役\n 我们不用搞对立 重庆的崽儿好久有畏惧\n 说哪里又不如哪里 现在我看都rm未必\n 像列车穿过了地下我们的声音在飞驰\n 风雨到来的时候会把每一张脸都吹湿\n 每次准时到达 在每个地点永远不推迟\n 在这场赌桌 Right now I got triple Ace\n 每句歌词 每个韵脚 是我最闪亮的配饰\n Lit Xu with no leash I put ice on my wrist\n Mic cut my hair like baber 划过的推子\n 不得去找借口 流下的汗水不是该背时\n *WAYUP*\n
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=1994240562.mp3",
}
let mPlayer = new lrcPlayerY(opts);
// 格式化时间数据
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 事件处理中添加与控制路径有关的处理
mPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = mPlayer.mObj.currentTime / mPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(mPlayer.mObj.duration);
curTime.textContent = formatTime(mPlayer.mObj.currentTime);
});
// 动态元素监测
//let aniSvg = oBlk.querySelectorAll('svg');
let runState = () => {
mPlayer.mObj.paused
? (oBlk.style.setProperty('--rState','paused'))
: (oBlk.style.setProperty('--rState','running'));
}
// 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 = mPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
mPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; mPlayer.idx = idx;
mPlayer.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 = () => {
mPlayer.mObj.paused ? (mPlayer.mObj.play()) : (mPlayer.mObj.pause());
}
mPlayer.mObj.addEventListener('play', () => runState());
mPlayer.mObj.addEventListener('pause', () => runState());
mPlayer.mObj.play().catch(_ = () => runState());
}
</script> 很有特色的重庆 - 轻轨，谢谢老师精彩分享{:4_191:} 醉美水芙蓉 发表于 2024-12-3 11:50
老师厉害！播放器漂亮！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 杨帆 发表于 2024-12-3 12:14
很有特色的重庆 - 轻轨，谢谢老师精彩分享
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 穿楼而过的轻轨，是全球唯一。看到标题就想到这事{:4_173:} 这个制作很有趣，在大图背景下用相对小的图轮播，浑然一体，很奇妙。
不过轮播都不带间隙的，弄得我想看一眼背后的大图都看不到{:4_173:} 果然图片里有穿越楼房的，歌曲也有趣，有几句都听不懂。
忍不住一张张看着图片轮转玩，如此奇妙的重庆轻轨。有一个效果好像图片一个角吊在那似的。
很吸引人的帖子{:4_199:} 红影 发表于 2024-12-3 13:52
穿楼而过的轻轨，是全球唯一。看到标题就想到这事
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-12-3 13:54
这个制作很有趣，在大图背景下用相对小的图轮播，浑然一体，很奇妙。
不过轮播都不带间隙的，弄得我想看一 ...
背后图片和前面的一样。{:5_117:} 红影 发表于 2024-12-3 13:59
果然图片里有穿越楼房的，歌曲也有趣，有几句都听不懂。
忍不住一张张看着图片轮转玩，如此奇妙的重庆轻轨 ...
不看歌词我也听不懂说的是什么{:5_102:}
夕阳黄昏 发表于 2024-12-3 15:42
谢谢夕老师带来的山城奇景{:4_187:} 夕阳黄昏 发表于 2024-12-3 15:44
背后图片和前面的一样。
就是因为看不到所以才特别想看，人的好奇心也不比猫儿少{:4_189:} 夕阳黄昏 发表于 2024-12-3 15:45
不看歌词我也听不懂说的是什么
可能有些带着重庆口音的吧{:4_173:} 哇塞，老顽童，这个背景图图的房子第一次看见，很壮观的，重庆山城吧 这个播放器也是漂亮，外面带进度条的{:4_199:} 看见了，标题是重庆 -- 轻轨 这个背景图片还是叠层的，老顽童就是厉害，新东西不少 小辣椒欣赏加学习{:4_187:} 红影 发表于 2024-12-3 20:36
可能有些带着重庆口音的吧
大概是重庆版说唱。