|
|

楼主 |
发表于 2025-9-8 20:26
|
显示全部楼层
帖子代码
- <style>
- @import 'https://638183.freep.cn/638183/web/css/tz01.css';
- #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/xxhx.webp') no-repeat center/cover; --ma-size: 15%; }
- #ma { animation: unset; cursor: unset; left: 10px; bottom: 65px; }
- #btnFs { right: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
- #player { stroke-width: 2; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
- #lrc { left: 30px; bottom: 20px; }
- #lrc::before { background: green; background-clip: text; -webkit-background-clip: text; }
- .prog { stroke-width: 10; transition: 0.25s; }
- </style>
- <div id="pa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2717576053" autoplay loop></audio>
- <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" autoplay loop muted></video>
- <div id="ma" class="brightness">
- <svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
- <path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="lightyellow" stroke="red" stroke-dasharray="1227" stroke-dashoffset="1227"></path>
- <path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="none" stroke="rgba(100,0,0,.35)" stroke-dasharray="1227" stroke-dashoffset="0" style="cursor: pointer;">
- <title>调节进度</title>
- </path>
- <path id="player" d="M0 0 C-160 100 100 100 0 0 C-6.603 -188.564 -136.603 36.603 0 0 C166.603 88.564 36.603 -136.603 0 0Z" fill="darkred" stroke="yellow">
- <title>Alt+X</title>
- </path>
- </svg>
- </div>
- </div>
- <script type="module">
- import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
- import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
- const progs = document.querySelectorAll('.prog'); // 进度条(path标签)标识
- const pathLength = progs[0].getTotalLength(); // 路径长度
- // 音频播放时 : 进度变更+跳动
- aud.ontimeupdate = () => {
- progs[0].setAttribute('stroke-dashoffset', pathLength - pathLength * aud.currentTime / aud.duration);
- progs[0].setAttribute('opacity', Math.random() * 0.5 + 0.5);
- };
- // 点击track路径 : 调节播放进度
- progs[1].onclick = (e) => {
- const point = msvg.createSVGPoint(); // 创建坐标对象
- point.x = e.clientX;
- point.y = e.clientY;
- // 转换点坐标为svg坐标对象
- const svgPoint = point.matrixTransform(msvg.getScreenCTM().inverse());
- if (progs[1].isPointInStroke(svgPoint)) {
- aud.currentTime = aud.duration * getDistanceFromStart(progs[1], svgPoint) / pathLength;
- }
- };
- const geci = [
- [1.30,"一颗狼星 :夏花",1.5],
- [4.03,"生命呀坠落吧",2.0],
- [6.04,"颓败后再发芽",1.0],
- [7.09,"永恒呀一霎那",2.0],
- [9.08,"春雨飘洒",1.0],
- [10.08,"绚烂在盛夏",1.0],
- [11.08,"生命呀起舞吧",2.0],
- [13.04,"绽放后又腐化",2.0],
- [15,"流光呀不停下",1.1],
- [16.09,"叶纹写出",1.0],
- [17.09,"宇宙的火花",2.0],
- [19.05,"根系相联",1.0],
- [20.06,"蜿蜒成掌纹",2.0],
- [22.07,"手中托起",1.9],
- [24.02,"蝴蝶的重生",1.9],
- [26.03,"腐烂果核",1.0],
- [27.07,"长出云层",1.9],
- [29.01,"暗河涌动",1.1],
- [30.08,"反哺晨昏",3.0],
- [33.04,"泥土裂开",1.0],
- [34.08,"胚胎变星辰",2.0],
- [36.09,"冰雪消融",1.9],
- [38.02,"结下春的藤",2.0],
- [40.05,"枝叶繁茂",1.0],
- [41.09,"遮掩伤痕",1.9],
- [43.01,"吐息之际",1.1],
- [44.09,"日落月升",2.0],
- [46.06,"解冻蒸发凝结融化",3.0],
- [50.03,"悬挂崩塌轮回颂答",3.0],
- [53.06,"解冻蒸发凝结融化",3.0],
- [57.03,"悬挂崩塌轮回颂答",3.0],
- [60.08,"生命呀坠落吧",2.0],
- [62.08,"颓败后再发芽",2.0],
- [64.08,"永恒呀一霎那",1.9],
- [66.02,"春雨飘洒",1.0],
- [67.02,"绚烂在盛夏",1.0],
- [68.03,"生命呀起舞吧",1.1],
- [69.09,"绽放后又腐化",2.0],
- [71.04,"流光呀不停下",2.0],
- [73.02,"叶纹写出",1.0],
- [74.03,"宇宙的火花",2.0],
- [89.09,"根系相联",1.9],
- [91.02,"蜿蜒成掌纹",2.0],
- [93.03,"手中托起",1.0],
- [94.07,"蝴蝶的重生",2.0],
- [96.09,"腐烂果核",1.9],
- [98.03,"长出云层",1.0],
- [99.07,"暗河涌动",2.0],
- [101.04,"反哺晨昏",2.0],
- [103.09,"泥土裂开",1.9],
- [105.03,"胚胎变星辰",2.0],
- [107.05,"冰雪消融",1.0],
- [108.08,"结下春的藤",2.8],
- [111,"枝叶繁茂",1.0],
- [112.04,"遮掩伤痕",1.0],
- [113.07,"吐息之际",2.0],
- [115.05,"日落月升",2.0],
- [117.06,"解冻蒸发凝结融化",3.0],
- [120.08,"悬挂崩塌轮回颂答",3.0],
- [124.06,"解冻蒸发凝结融化",3.0],
- [128.08,"悬挂崩塌轮回颂答",3.0],
- [131.03,"生命呀坠落吧",1.1],
- [132.1,"颓败后再发芽",2.0],
- [134.09,"永恒呀一霎那",2.0],
- [136.07,"春雨飘洒",1.0],
- [137.07,"绚烂在盛夏",1.0],
- [138.08,"生命呀起舞吧",1.9],
- [140.03,"绽放后又腐化",1.1],
- [141.1,"流光呀不停下",3.0],
- [144.06,"叶纹写出",0.0],
- [144.09,"宇宙的火花",2.3],
- [152.06,"生命呀起舞吧",2.0],
- [154.06,"绽放后又腐化",2.0],
- [156.05,"流光呀不停下",2.0],
- [158.01,"叶吻写出",1.0],
- [159,"宇宙的火花",3.1]
- ];
- FS(pa, player);
- lrc(pa, geci);
- // 获取路径点击点长度
- function getDistanceFromStart(pathElement, point) {
- const samples = Math.ceil(pathLength); // 按像素采样
- let bestPos = 0;
- let bestDist = Infinity;
- // 路径起点
- const startPoint = pathElement.getPointAtLength(0);
- let minDist = Math.hypot(point.x - startPoint.x, point.y - startPoint.y);
- // 采样路径上的点
- for (let i = 0; i <= samples; i++) {
- const pos = (i / samples) * pathLength;
- const pathPoint = pathElement.getPointAtLength(pos);
- const dist = Math.hypot(point.x - pathPoint.x, point.y - pathPoint.y);
- if (dist < minDist) {
- minDist = dist;
- bestPos = pos;
- }
- }
- // 处理封闭路径
- if (bestPos > pathLength - 1 && minDist > Math.hypot(point.x - startPoint.x, point.y - startPoint.y)) {
- return 0;
- }
- return bestPos;
- }
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
花飞飞
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|