北京的秋天
<meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 1.8em 微软雅黑;
pointer-events:none;
left:20%;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%;
}
/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@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/iajmrlarranzUvHzTC3bk8uL4SxmDI1dqZjACQkk9eMTVZ08aHU5NMD8QvDLhT00XoicqhTSI83zyiaREiblkJrRCQ/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 = `
作词 : 马乙\n 作曲 : 马乙\n北京的秋天 迷人的蔚蓝\n阳光像情人的眼 那样柔软\n一阵风 将你的发抚向我的脸\n也抚弄我心里的那张帆\n北京的秋天 总是短暂\n就像你对我讲的没有永远\n随风飘散的落叶 无助的打着转\n我们只有裹紧身体 匆匆向前\n在这灿烂的日子里\n让我们拥抱着收获这爱情\n幸福的尖叫 一直到疲倦\n能心心相念，一直到疲倦\n可不可能 不只是一瞬间\n别像这北风来去太匆匆\n该如何向前 该怎样地誓言\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> 美、美，怎一个美字了得！ 一片金的银杏黄，配着背景的雕梁画栋，太美了{:4_199:} 这个进度条可以点击了，不但能点击，点后还能鼠标跟随，想拉到哪就到哪个进度。难难厉害了{:4_199:} 好像要再点一次，才能去掉鼠标跟随？
一直在这试难难的新代码呢{:4_173:} 梦油 发表于 2024-11-10 10:47
美、美，怎一个美字了得！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-11-10 10:48
一片金的银杏黄，配着背景的雕梁画栋，太美了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-11-10 10:52
这个进度条可以点击了，不但能点击，点后还能鼠标跟随，想拉到哪就到哪个进度。难难厉害了
这就被发现了{:5_117:} 红影 发表于 2024-11-10 11:04
好像要再点一次，才能去掉鼠标跟随？
一直在这试难难的新代码呢
如果不再点一下停止，鼠标穿越椭圆环时就会误触发调节动作。 醉美水芙蓉 发表于 2024-11-10 11:26
欣赏老师带来精彩！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 醉美水芙蓉 发表于 2024-11-10 11:28
老师一直玩的多图，今天只有一张图吗？
是多张图片啊，有没有可能你的浏览器出了问题。 北京秋天的风景好美啊！醉了！{:4_199:} 起个网名好难 发表于 2024-11-10 11:34
难难厉害，上次只不过提了一嘴，难难就去研究了，还研究成了{:4_199:} 起个网名好难 发表于 2024-11-10 11:35
这就被发现了
这个跟随还是头一次看到呢{:4_187:} 起个网名好难 发表于 2024-11-10 11:37
如果不再点一下停止，鼠标穿越椭圆环时就会误触发调节动作。
是啊，我前面就少了再点一下的步骤，发现它咋一直跟随啊{:4_173:} 起个网名好难 发表于 2024-11-10 11:34
“难难”朋友别客气。 梦江南 发表于 2024-11-10 12:03
北京秋天的风景好美啊！醉了！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif