|
|
楼主 |
发表于 2024-11-11 12:24:25
|
显示全部楼层
IP:湖北
<meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);:root{--rState:running;}.lrcShow{font:normal 1.2em sans-serif;pointer-events:none;left:15%;bottom:0px;z-index:99;filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white);}.lrcShow::before{color:transparent;}#outBlk{position:relative;width:800px;height:900px;background-color:#000000;overflow:hidden;margin-top:90px;left:50%;transform:translate(-50%);box-shadow:4px 4px 10px #000;}zxx-slide{width:100%;height:100%;position:absolute;}.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}.zxx-slide-a.in{z-index:1;animation-duration:2s;animation-name:tilt-in-fwd-tr;transition:1s;}.zxx-slide-img{width:100%;height:100%;}@keyframes tilt-in-fwd-tr{0%{transform:rotateY(20deg) rotateX(35deg) translate(300px,-300px) skew(-35deg,10deg);opacity:0;}100%{transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);opacity:1;}}#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:100;}#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}@keyframes rot{to{transform:rotate(1turn)}}
</style>
<div id="outBlk">
<zxx-slide>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqro2AfRyzib7jOAhwceV8kqZXu4opgoHePu057B89SNvrFX7ztkmotcw/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dq6gXicRDibAnkoWzKrKBZ6WOx88ibYX1qX1CLu0yYPP5c8LEQtVxBNuq2A/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqU8WEJIT9szxb9UWqxrQkIHbVJzbD7N12TtzQgJm0YwYaycV2BOrGWw/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqupMQE9GgZM42vBwtWk3tfJiamZaQmePP25fdwHURHY0WGSJChEUcbpA/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqohPucOibtxKCZy3LBJS67KhJE6N7ic3kqzYFSJqvLVvtEiaN6cicHE3Fnw/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dq0b8KrEaJlLL74lWQMLE01dXbjh6KT4eJpn7GwSHiaeeiaRF0nOsEwkAA/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqkuXyBoC09soTYqPicwicCeTKibHBB3qNc9TYyqLFYRO9fT9ZVGP5Kzf8Q/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqZjACQkk9eMTVZ08aHU5**8QvDLhT00XoicqhTSI83zyiaREiblkJrRCQ/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqyqet45C7ZL5aSic8yqUzK1ughU2IgibGxNZ9SC95pAcUXRaosYA0cNng/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqrPt1GUh5WC1FAOb8coJXU5ne9TYKwR7ylPp3Qf72lbpWbPBpIJnoIw/640">
</a>
<a class="zxx-slide-a">
<img class="zxx-slide-img" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqeFJoSTPsND2kwdXlBCYB1agFRIxnwT5xqiaFVLgWyIYPpib72fKNX8Jw/640">
</a>
</zxx-slide>
<div id="processMeter">
<svg stroke-width="5" viewBox="0 0 200 100" id="svgObj">
<!-- 背景圆形 -->
<path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5" fill="none" ></path>
<!-- 进度条 -->
<path
class="process-circle"
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>
<defs>
<clipPath id="clip">
<circle cx="100" cy="50" r="41" />
</clilpPath>
</defs>
<image xlink:href="http://p2.music.126.net/bCX1C6DOWgeN033ng4oKDg==/109951164206727684.jpg" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
<text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
<text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
</svg>
</div>
<div class="lrcShow" data-lrc="北京的秋天" >北京的秋天</div>
</div>
<script>
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)
}
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 circlePoints = [];
let bgcLen = bgc.getTotalLength();
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
//console.log(circlePoints);
let lrctxt = `
[00:00.00] 作词 : 马乙\n[00:01.00] 作曲 : 马乙\n[00:21.31]北京的秋天 迷人的蔚蓝\n[00:29.23]阳光像情人的眼 那样柔软\n[00:37.24]一阵风 将你的发抚向我的脸\n[00:44.72]也抚弄我心里的那张帆\n[02:22.85][00:53.59]北京的秋天 总是短暂\n[02:30.84][01:01.60]就像你对我讲的没有永远\n[02:38.80][01:09.57]随风飘散的落叶 无助的打着转\n[02:45.74][01:16.48]我们只有裹紧身体 匆匆向前\n[03:25.99][02:53.40][01:24.25]在这灿烂的日子里\n[03:30.33][02:57.64][01:28.43]让我们拥抱着收获这爱情\n[03:02.32][01:33.05]幸福的尖叫 一直到疲倦\n[03:34.81]能心心相念，一直到疲倦\n[03:58.63][03:42.07][03:09.46][01:40.26]可不可能 不只是一瞬间\n[04:02.68][03:46.59][03:13.79][01:44.70]别像这北风来去太匆匆\n[04:06.80][03:50.53][03:17.96][01:48.74]该如何向前 该怎样地誓言\n
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=41663822.mp3",
}
let player = new lrcPlayerY(opts);
//console.log(player.lrcVec);
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function() {
clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function() {
clearTimeout(timerSlide);
funSlide();
});
// 对应的元素
var eleSlides = [].slice.call(container.querySelectorAll('a'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));
var funSlide = function() {
eleSlides.forEach(function(slide, index) {
if (!player.mObj.paused) {
if (indexSlide == index) {
slide.classList.add('in');
} else if (slide.classList.contains('in')) {
slide.classList.remove('in');
}
}
});
timerSlide = setTimeout(function() {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 12000);
}
indexSlide++;
setTimeout(funSlide, 12000);
});
let formatTime = (time) => {
let str = '';
let min = parseInt(time / 60);
let sec = parseInt(time % 60);
return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
};
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
processCircle.style.strokeDashoffset = circumference * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
rPlayer.onclick = () => {
player.mObj.paused ? (rPlayer.style.setProperty('--rState','running'), player.mObj.play()) : (rPlayer.style.setProperty('--rState','paused'), player.mObj.pause());
}
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX), my = (point.y - event.offsetY)
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / circumference;
let chkTime = player.mObj.duration * chkVal;
processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
for(i = 0; i < player.lrcVec.length; i++) {
if(player.lrcVec.seconds >= chkTime) {
//console.log(player.lrcVec.seconds, i);
player.idx = i;
player.mObj.currentTime = chkTime;
break;
}
};
};
processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
processCircle.onclick = bgc.onclick = () => seeking = !seeking;
}
</script> |
|
发表于 2024-11-11 12:22:15
