This commit is contained in:
2026-07-03 10:03:48 +08:00
parent ad0d0075c8
commit 0a89567da1
3 changed files with 185 additions and 68 deletions

View File

@@ -2,6 +2,6 @@ export default {
url: "https://www.kuaishou.com/rest/v",
urlList: {
// 点赞
liked: "/feed/liked"
liked: "/feed/liked?__NS_hxfalcon=HUDR_sFnX-DtsGEFXsbDPTXTMP-sk0is6A6ZH7E4jlryNsQCuNZZRdSj1s8iIQL_GyIl1qEaCKXZ1Qul4A0B9srS50qlqmo1ekhckPk6DAhrslMP3hB67Z7lgc3p-2cIjWWAFDvwzWSv1h6D9aBYIzhKdDXvJ7k1ZiNdT-bUnhQif$HE_d1ce563331e6bf37bf059be95bf1efe5799b9a9a9a9b47023620db46ee2f3d7a7d77059b01cca440e1cca4729a&caver=2"
}
}

View File

@@ -4,21 +4,30 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>视频圆形放大镜(最终流畅版)</title>
<title>视频圆形放大镜(高性能优化版)</title>
<script src="./lazyload.min.js"></script>
<style>
/* reset + 基础性能优化:减少重绘层级,使用 transform 和 will-change */
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
/* 避免字体相关开销 */
font-size: 0;
line-height: 0;
}
body {
background: #000;
overflow-x: hidden;
/* 防止滚动条抖动导致重绘 */
}
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
@@ -32,49 +41,101 @@
overflow: hidden;
}
/* 视频元素样式优化 */
ul li .lazy {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: auto;
backface-visibility: hidden;
}
/* 放大镜样式 */
/* ✨ 高性能·极致质感放大镜:圆润 + 立体 + 通透玻璃感(强化高光版) */
.video-magnifier {
position: fixed;
width: 400px;
height: 400px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(0, 0, 0, 0.3);
/* 通透玻璃基底(略微提亮) */
background: rgba(255, 255, 255, 0.08);
/* 低消耗高性能模糊 */
backdrop-filter: blur(6px);
/* 🔥 强化:高亮边框 + 超强内发光 + 外光晕(立体感核心) */
border: 1.2px solid rgba(173, 216, 255, 0.75);
/* 边框更亮更粗 */
box-shadow:
0 0 50px rgba(130, 180, 255, 0.65),
/* 外层大光晕(更亮) */
0 0 100px rgba(100, 150, 255, 0.25),
/* 扩散柔光 */
inset 0 0 30px rgba(255, 255, 255, 0.35),
/* 内高光(强化) */
inset 0 0 60px rgba(130, 180, 255, 0.18);
/* 内发光(强化) */
pointer-events: none;
overflow: hidden;
z-index: 10000;
display: none;
backdrop-filter: blur(10px);
transition: left 0.02s ease-out, top 0.02s ease-out;
background: transparent !important;
/* 高性能transform 定位,无 left/top 重排 */
transform: translate(0, 0);
will-change: transform, width, height;
backface-visibility: hidden;
/* 边缘超级平滑,无锯齿 */
-webkit-font-smoothing: antialiased;
}
/* 放大镜内部视频:高清渲染 + 独立合成层 */
.video-magnifier video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent !important;
background: transparent;
will-change: transform;
pointer-events: none;
/* 高清缩放画质 */
image-rendering: high-quality;
}
/* 顺滑尺寸过渡,不卡 */
.video-magnifier {
transition:
width 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}
</style>
</head>
<body>
<ul></ul>
<!-- 放大镜容器 -->
<div class="video-magnifier" id="magnifier">
<video id="magnifierVideo" muted loop playsinline></video>
</div>
<script>
// ====================== 键盘按键常量配置区(全部抽离,统一维护) ======================
const KEY_CODES = {
KEY_F: 70, // F键开关圆形放大镜
SPACE: 32, // 空格键:启停页面自动滚动
NUM_PLUS: 107, // 小键盘+:放大放大镜尺寸
MAIN_PLUS: 187, // 主键盘=/+:放大放大镜尺寸
NUM_MINUS: 109, // 小键盘-:缩小放大镜尺寸
MAIN_MINUS: 189, // 主键盘-/_缩小放大镜尺寸
KEY_O: 79, // O键打开当前视频作者主页
KEY_R: 82, // R键重置自动滚动速度为默认值
ARROW_DOWN: 40, // 下箭头:加快自动滚动速度
ARROW_UP: 38 // 上箭头:减慢自动滚动速度(不低于默认速度)
};
// 页码
let page = "";
// 默认滚动速度
const defaultSpeed = 2;
let scrollSpeed = defaultSpeed;
let scrollLock = false;
@@ -87,35 +148,38 @@
let hoveredVideo = null;
let magnifierEnabled = false;
// ==================== 流畅缩放配置 ====================
const minMagnifierSize = 400; // 最小尺寸
const maxMagnifierSize = 600; // 最大尺寸(防卡顿)
const stepSize = 100; // 每次增减 40px流畅不卡
// 流畅缩放配置
const minMagnifierSize = 200;
const maxMagnifierSize = 600;
const stepSize = 80;
let magnifierSize = 400;
const scale = 4;
// 记录当前鼠标位置
// 鼠标位置
let currentMouseX = 0;
let currentMouseY = 0;
let lazyLoadInstance = null;
let isUpdating = false;
// 实时记录鼠标位置
// 实时记录鼠标
document.addEventListener('mousemove', (e) => {
currentMouseX = e.clientX;
currentMouseY = e.clientY;
});
}, { passive: true });
// 初始化懒加载
const initLazyLoad = () => {
if (lazyLoadInstance) return;
lazyLoadInstance = new LazyLoad({
threshold: 300,
threshold: 500,
elements_selector: ".lazy",
unobserve_entered: true,
cancel_on_exit: true,
});
};
// 请求数据
const getHttpData = async () => {
if (scrollLock) return;
try {
@@ -130,6 +194,7 @@
}
};
// 渲染视频列表
const render = (data) => {
const { feeds, pcursor } = data;
page = pcursor;
@@ -156,11 +221,13 @@
});
ul.appendChild(fragment);
if (lazyLoadInstance) lazyLoadInstance.update();
lazyLoadInstance?.update();
if (!handlerId) startScroll();
};
// 自动滚动
const startScroll = () => {
cancelAnimationFrame(handlerId);
const scrollStep = () => {
window.scrollBy(0, scrollSpeed);
handlerId = requestAnimationFrame(scrollStep);
@@ -173,63 +240,97 @@
handlerId = null;
};
// 手动切换滚动(空格/点击)——完美修复版
const toggleScroll = () => {
handlerId ? stopScroll() : startScroll();
};
document.onclick = toggleScroll;
// 强制更新放大镜到当前鼠标位置
function updateMagnifierToMouse() {
if (!magnifierEnabled) return;
magnifier.style.width = magnifierSize + 'px';
magnifier.style.height = magnifierSize + 'px';
const element = document.elementFromPoint(currentMouseX, currentMouseY);
if (!element || element.tagName !== 'VIDEO') {
magnifier.style.display = 'none';
return;
}
const video = element;
if (hoveredVideo !== video) {
hoveredVideo = video;
magnifierVideo.src = video.dataset.src || video.src;
magnifierVideo.play().catch(() => { });
}
magnifier.style.display = 'block';
magnifier.style.left = (currentMouseX - magnifierSize / 2) + 'px';
magnifier.style.top = (currentMouseY - magnifierSize / 2) + 'px';
const rect = video.getBoundingClientRect();
const relativeX = (currentMouseX - rect.left) / rect.width;
const relativeY = (currentMouseY - rect.top) / rect.height;
const offsetX = -(relativeX - 0.5) * rect.width * scale;
const offsetY = -(relativeY - 0.5) * rect.height * scale;
magnifierVideo.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
}
document.onkeydown = (e) => {
const { keyCode } = e;
// F键开关放大镜
if (keyCode === 70) {
e.preventDefault();
magnifierEnabled = !magnifierEnabled;
// 如果放大镜开着,先关闭它,再恢复滚动
if (magnifierEnabled) {
updateMagnifierToMouse();
} else {
magnifierEnabled = false;
magnifier.style.display = 'none';
magnifierVideo.pause();
magnifierVideo.src = '';
hoveredVideo = null;
}
// 正常切换滚动(保留原本开关功能)
handlerId ? stopScroll() : startScroll();
};
document.onclick = toggleScroll;
// 🔥 放大镜核心(带边界限制,无黑边)
function updateMagnifierToMouse() {
if (!magnifierEnabled || isUpdating) return;
isUpdating = true;
requestAnimationFrame(() => {
magnifier.style.width = `${magnifierSize}px`;
magnifier.style.height = `${magnifierSize}px`;
const target = document.elementFromPoint(currentMouseX, currentMouseY);
if (!target || target.tagName !== 'VIDEO') {
magnifier.style.display = 'none';
isUpdating = false;
return;
}
// + 键:每次增加 40px最大 800px
if (keyCode === 107 || keyCode === 187) {
if (hoveredVideo !== target) {
hoveredVideo = target;
magnifierVideo.src = target.dataset.src || target.src;
magnifierVideo.play().catch(() => { });
}
magnifier.style.display = 'block';
magnifier.style.left = `${currentMouseX - magnifierSize / 2}px`;
magnifier.style.top = `${currentMouseY - magnifierSize / 2}px`;
const rect = target.getBoundingClientRect();
let rx = (currentMouseX - rect.left) / rect.width;
let ry = (currentMouseY - rect.top) / rect.height;
// 边界防黑边
const safe = 1 / scale;
rx = Math.max(safe / 2, Math.min(1 - safe / 2, rx));
ry = Math.max(safe / 2, Math.min(1 - safe / 2, ry));
const ox = -(rx - 0.5) * rect.width * scale;
const oy = -(ry - 0.5) * rect.height * scale;
magnifierVideo.style.transform = `translateZ(0) scale(${scale}) translate(${ox}px, ${oy}px)`;
isUpdating = false;
});
}
// 键盘控制
document.onkeydown = (e) => {
const { keyCode } = e;
// F键开关放大镜
if (keyCode === KEY_CODES.KEY_F) {
e.preventDefault();
magnifierEnabled = !magnifierEnabled;
if (magnifierEnabled) {
// 打开:暂停滚动
stopScroll();
updateMagnifierToMouse();
} else {
// 关闭:恢复滚动
magnifier.style.display = 'none';
magnifierVideo.pause();
magnifierVideo.src = '';
hoveredVideo = null;
// startScroll();
}
}
// 空格:手动启停滚动(放大镜开着也会自动关闭!)
if (keyCode === KEY_CODES.SPACE) {
e.preventDefault();
toggleScroll();
}
// + 键 放大(小键盘+ / 主键盘=
if (keyCode === KEY_CODES.NUM_PLUS || keyCode === KEY_CODES.MAIN_PLUS) {
e.preventDefault();
if (magnifierSize < maxMagnifierSize) {
magnifierSize += stepSize;
@@ -237,8 +338,8 @@
}
}
// - 键:每次减少 40px最小 400px
if (keyCode === 109 || keyCode === 189) {
// - 键 缩小(小键盘- / 主键盘-
if (keyCode === KEY_CODES.NUM_MINUS || keyCode === KEY_CODES.MAIN_MINUS) {
e.preventDefault();
if (magnifierSize > minMagnifierSize) {
magnifierSize -= stepSize;
@@ -246,32 +347,48 @@
}
}
// 其他原有按键
if (keyCode === 79) { e.preventDefault(); if (currentVideo) open(currentVideo.author); }
if (keyCode === 32) { e.preventDefault(); toggleScroll(); }
if (keyCode === 82) { e.preventDefault(); scrollSpeed = defaultSpeed; }
if (keyCode === 40) { e.preventDefault(); scrollSpeed += 2; }
if (keyCode === 38) { e.preventDefault(); scrollSpeed > defaultSpeed && (scrollSpeed -= 2); }
// O键打开当前视频作者主页
if (keyCode === KEY_CODES.KEY_O) {
e.preventDefault();
currentVideo?.author && open(currentVideo.author);
}
// R键重置滚动速度为默认值
if (keyCode === KEY_CODES.KEY_R) {
e.preventDefault();
scrollSpeed = defaultSpeed;
}
// 下箭头:加快滚动速度
if (keyCode === KEY_CODES.ARROW_DOWN) {
e.preventDefault();
scrollSpeed += 2;
}
// 上箭头:减慢滚动速度(不能低于默认速度)
if (keyCode === KEY_CODES.ARROW_UP) {
e.preventDefault();
scrollSpeed > defaultSpeed && (scrollSpeed -= 2);
}
};
// 滚动加载
let scrollTimer = null;
window.onscroll = () => {
if (scrollLock) return;
clearTimeout(scrollTimer);
scrollTimer = setTimeout(() => {
const scrollTop = window.scrollY;
const clientHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (clientHeight + scrollTop >= scrollHeight - 300) {
getHttpData();
}
}, 150);
const st = window.scrollY;
const ch = window.innerHeight;
const sh = document.documentElement.scrollHeight;
if (ch + st >= sh - 500) getHttpData();
}, 200);
};
ul.addEventListener('mousemove', (e) => {
if (!magnifierEnabled) return;
updateMagnifierToMouse();
});
// 鼠标事件
ul.addEventListener('mousemove', () => {
magnifierEnabled && updateMagnifierToMouse();
}, { passive: true });
ul.addEventListener('mouseleave', () => {
if (!magnifierEnabled) return;
@@ -279,14 +396,14 @@
magnifierVideo.pause();
magnifierVideo.src = '';
hoveredVideo = null;
}, true);
}, { passive: true, capture: true });
ul.addEventListener("mouseenter", (e) => {
if (e.target.tagName === "VIDEO") {
e.target.readyState >= 2 && e.target.play();
currentVideo = e.target;
}
}, true);
}, { passive: true, capture: true });
initLazyLoad();
getHttpData();

View File

@@ -13,7 +13,7 @@ export class AxioDao {
timeout: 10000,
headers: {
"Content-Type": "application/json",
"cookie": "kpf=PC_WEB; clientid=3; did=web_7aa35438f931e14fe470f001c9f567ec; kwpsecproductname=kuaishou-vision; userId=58344290; kuaishou.server.webday7_st=ChprdWFpc2hvdS5zZXJ2ZXIud2ViZGF5Ny5zdBKwAQHxyR5bWVNh7KrpNyCMIujOnqy383HvNuUVP0dWkTKvgVdJgpk3_gzZcVaGGxY2SMKV_-t34ND4_nM6tKtBhs7PXiwSWdT-fbK8EVQhZkyTrfRwVNxnKxGYvyaN4bcX8ZSyetkuuwMW8wVJJDhFjlVOK37qRRdJz_1MtpVIyFyy-gZ0iG0xwQJXnAZIKXakmH72qc7Ta-r0EWdwXdapM1FAB7SYUEsb5JBCoq60QA1VGhJd10MMXKUTryN4EXEM1nBv898iIGhj1Z7oQnnDhZLRTJasZqh85Pt6iycf0azzgPQRW9NjKAUwAQ; kuaishou.server.webday7_ph=8afd3b47e4f2ae941c5f0a2f6683f7176d0a; kwpsecproductname=kuaishou-vision; ktrace-context=1|MS44Nzg0NzI0NTc4Nzk2ODY5LjU4Mjc1MjU2LjE3ODAxNTg4NDQ5MjMuMjc5ODA3MjU=|MS44Nzg0NzI0NTc4Nzk2ODY5LjI1Njc3MzQ5LjE3ODAxNTg4NDQ5MjMuMjc5ODA3MjY=|0|webservice-user-growth-node|webservice|true|src-Js; kpn=KUAISHOU_VISION; kwssectoken=Sk26dfFAjJDb+qp06cbMoxr2vOGxFQS48Demb7hzLQDAF/SYzVNnuyba6Bjd7KkXYsb5nBCaYcOS4gbqp1Ic2w==; kwscode=a715a587d1b6832f2760590584b05c42663b5eae5c68614a6b055f2e0f6069b7; kwfv1=PnGU+9+Y8008S+nH0U+0mjPf8fP08f+98f+nLlwnrIP9+Sw/ZFGfzY+eGlGf+f+e4SGfbYP0QfGnLFwBLU80mYGApj+f+08eHF+AQYG/chP/cI8eSD+/+jPfHFPAZ9+04YP/Q0G/ZUPBpj+BLhwerIwePU+fHMPBLIPArl+fQfP9G98fGE8fLlwBzYwn+SGAWI+AP7we4jPArI8n8jP04j+Z=="
"cookie": "kpf=PC_WEB; clientid=3; did=web_7aa35438f931e14fe470f001c9f567ec; kwpsecproductname=kuaishou-vision; kwpsecproductname=kuaishou-vision; userId=58344290; kuaishou.server.webday7_st=ChprdWFpc2hvdS5zZXJ2ZXIud2ViZGF5Ny5zdBKwATevTP3N4i5031ZUj_OnJeSvQaG34CYiyYJEqm1aZDXqLMSGRqFNiVJFy_PC8Xwga_kUTIxooAq2y53ZmV6C4L87J1bcnArk81O3Qqi0wrAbwPSptUl6SxY9fnx_EZWz13KMVxPlMj4JFiWmU4KxWzw-hPh8ZfZTR_srA71ofF1jK39-St5mON9BterAy1Q1wQfSCJMfAaXYKPRwStrCfeTe_LUTI1fUQ2nKYL3QAp4nGhKnKVNp11MmMNF2Nrbv1tNDD3siID1cWmuwwYzFA7VGQVCjAS9RYzsClc4vJy54CYVE0fXIKAUwAQ; kuaishou.server.webday7_ph=12e08cce0cdcfe35fb582092d34d2f792ebc; kwssectoken=yd5rnQPtuTRVfn1Nue0+bYkoncgKF+uzfYCj6plqI/hf4PV+MgxKiNsULKrz2PZaajmVSfAOEg7xprhk2M6DSg==; kwscode=933f4035f7715a5bd619333317306be85211bb1c7aafb83e9a7c35189ce05e1d; ktrace-context=1|MS44Nzg0NzI0NTc4Nzk2ODY5LjcyNTc0OTc4LjE3ODMwNDM1MzE4MDYuMjM5ODk2MTE=|MS44Nzg0NzI0NTc4Nzk2ODY5LjY3NzczNTcxLjE3ODMwNDM1MzE4MDYuMjM5ODk2MTI=|0|webservice-user-growth-node|webservice|true|src-Js; kpn=KUAISHOU_VISION; kwfv1=PnGU+9+Y8008S+nH0U+0mjPf8fP08f+98f+nLlwnrIP9+Sw/ZFGfzY+eGlGf+f+e4SGfbYP0QfGnLFwBLU80mYG9HI8nH9wnz0PezSPeGUGfHAP0bDP0zYGfcMPnQj8BGF+APE+0L9P9LlGfrFGAYD8BQY+04j+erh+/clGnG98eL=; kwssectoken=cLhaB1fdLEBZx2j37kPOtJwkruiYApy0msJwXQpD8nyamSl4Ea1ogjr+JrCJxVySRn71T+7daUF0+KQsrQrfZQ==; kwscode=6c4811e87dd340a792d10922c506f53cad66eac1f00da2c2deb40f094ed6c0c9"
}
});
this.ResponseInterceptor();