请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 杨帆 于 2024-12-12 12:54 编辑
<style> @import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css); :root{--rState:running;--w:1400px;--h:800px;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em 华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}
.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;} .lrcShow::before{color:hsl(0,80%,80%);} #outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;} zxx-slide{width:var(--w);height:var(--h);position:absolute;z-index:1;} .zxx-slide-a{position:absolute;cursor:default;pointer-events:none;} .zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;} .zxx-slide-img{width:var(--w);height:var(--h);} @keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}} #processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:3;} #rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);} @keyframes rot{to{transform: rotate(1turn)}} </style> <div id="outBlk">
<span id="fullscreen">全屏观赏</span>
<zxx-slide> <svg stroke-width="5" viewBox="0 0 200 100" id="processMeter"> <!-- 背景圆形 --> <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="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" 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></zxx-slide> <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][02:49.00] `; let opts = { lrcTxt:lrctxt, audioURL:"https://www.joy127.com/url/109961.mp3", } let player = new lrcPlayerY(opts); //console.log(player.lrcVec); let pics = [ "https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif", "https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif", "https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif", "https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif", "https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif", "https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif", "https://pic.imgdb.cn/item/674d826dd0e0a243d4dbf8d4.gif", "https://pic.imgdb.cn/item/674d8282d0e0a243d4dbf8f2.gif", "https://pic.imgdb.cn/item/674d8295d0e0a243d4dbf916.gif", "https://pic.imgdb.cn/item/674d82a8d0e0a243d4dbf930.gif", ]; 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[0].appendChild(aObj); }); [].slice.call(eleZxxSlides).forEach(function(container) { let timerSlide = null; let indexSlide = 0; container.addEventListener('mouseover', function() { clearTimeout(timerSlide); }); container.addEventListener('mouseout', function() { clearTimeout(timerSlide); funSlide(); }); // 对应的元素 let eleSlides = [].slice.call(container.querySelectorAll('a')); let eleButtons = [].slice.call(container.querySelectorAll('button')); let 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 ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.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; }
let fs = true; fullscreen.onclick = () => { fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen()); fs = !fs; }; </script>
| 
发表于 2024-12-10 22:55
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-12-10 23:47
发表于 2024-12-11 06:20
