diff --git a/newKs/src/public/index.html b/newKs/src/public/index.html
index 0cfe2ae..71230ba 100644
--- a/newKs/src/public/index.html
+++ b/newKs/src/public/index.html
@@ -4,7 +4,7 @@
- 视频圆形放大镜（修复版）
+ 视频圆形放大镜（最终流畅版）
@@ -81,9 +85,27 @@
const magnifier = document.getElementById('magnifier');
const magnifierVideo = document.getElementById('magnifierVideo');
let hoveredVideo = null;
+ let magnifierEnabled = false;
+
+ // ==================== 流畅缩放配置 ====================
+ const minMagnifierSize = 400; // 最小尺寸
+ const maxMagnifierSize = 600; // 最大尺寸（防卡顿）
+ const stepSize = 100; // 每次增减 40px（流畅不卡）
+ let magnifierSize = 400;
+ const scale = 4;
+
+ // 记录当前鼠标位置
+ let currentMouseX = 0;
+ let currentMouseY = 0;
let lazyLoadInstance = null;
+ // 实时记录鼠标位置
+ document.addEventListener('mousemove', (e) => {
+ currentMouseX = e.clientX;
+ currentMouseY = e.clientY;
+ });
+
const initLazyLoad = () => {
if (lazyLoadInstance) return;
lazyLoadInstance = new LazyLoad({
@@ -156,28 +178,80 @@
};
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;
- if (keyCode === 79) {
+
+ // F键：开关放大镜
+ if (keyCode === 70) {
e.preventDefault();
- if (currentVideo) open(currentVideo.author);
+ magnifierEnabled = !magnifierEnabled;
+ if (magnifierEnabled) {
+ updateMagnifierToMouse();
+ } else {
+ magnifier.style.display = 'none';
+ magnifierVideo.pause();
+ magnifierVideo.src = '';
+ hoveredVideo = null;
+ }
}
- if (keyCode === 32) {
+
+ // + 键：每次增加 40px，最大 800px
+ if (keyCode === 107 || keyCode === 187) {
e.preventDefault();
- toggleScroll();
+ if (magnifierSize < maxMagnifierSize) {
+ magnifierSize += stepSize;
+ updateMagnifierToMouse();
+ }
}
- if (keyCode === 82) {
+
+ // - 键：每次减少 40px，最小 400px
+ if (keyCode === 109 || keyCode === 189) {
e.preventDefault();
- scrollSpeed = defaultSpeed;
- }
- if (keyCode === 40) {
- e.preventDefault();
- scrollSpeed += 2;
- }
- if (keyCode === 38) {
- e.preventDefault();
- scrollSpeed > defaultSpeed && (scrollSpeed -= 2);
+ if (magnifierSize > minMagnifierSize) {
+ magnifierSize -= stepSize;
+ updateMagnifierToMouse();
+ }
}
+
+ // 其他原有按键
+ 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); }
};
let scrollTimer = null;
@@ -194,45 +268,19 @@
}, 150);
};
- // ==================== 已修复：鼠标指哪放大哪 ====================
- const scale = 4; // 放大倍数
ul.addEventListener('mousemove', (e) => {
- if (e.target.tagName !== 'VIDEO') return;
- const video = e.target;
-
- // 切换视频时更新放大镜源
- if (hoveredVideo !== video) {
- hoveredVideo = video;
- magnifierVideo.src = video.dataset.src || video.src;
- magnifierVideo.play();
- }
-
- // 放大镜跟随鼠标（中心对齐）
- magnifier.style.display = 'block';
- magnifier.style.left = (e.clientX - magnifier.offsetWidth / 2) + 'px';
- magnifier.style.top = (e.clientY - magnifier.offsetHeight / 2) + 'px';
-
- // 获取视频元素的位置和尺寸
- const rect = video.getBoundingClientRect();
- // 鼠标在视频内的相对坐标（0~1）
- const relativeX = (e.clientX - rect.left) / rect.width;
- const relativeY = (e.clientY - 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)`;
+ if (!magnifierEnabled) return;
+ updateMagnifierToMouse();
});
- // 移出视频区域关闭放大镜
ul.addEventListener('mouseleave', () => {
+ if (!magnifierEnabled) return;
magnifier.style.display = 'none';
magnifierVideo.pause();
magnifierVideo.src = '';
hoveredVideo = null;
}, true);
- // 原有播放逻辑
ul.addEventListener("mouseenter", (e) => {
if (e.target.tagName === "VIDEO") {
e.target.readyState >= 2 && e.target.play();