d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-04 15:10:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

proxio 白点动画相关

Browse Source
This commit is contained in:
tangly1024
2025-04-14 14:57:28 +08:00
parent 24d9d1cfad
commit dacf1a28a7
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/CursorDot.js
View File

@@ -1,7 +1,9 @@
import { RouteMatcher } from 'next/dist/server/future/route-matchers/route-matcher';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect } from 'react'; import { useEffect } from 'react';
/**
* 白点鼠标跟随
* @returns
*/
const CursorDot = () => { const CursorDot = () => {
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
@@ -31,13 +33,15 @@ const CursorDot = () => {
// 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听 // 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听
const clickableElements = document.querySelectorAll( setTimeout(() => {
'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]' const clickableElements = document.querySelectorAll(
); 'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
clickableElements.forEach((el) => { );
el.addEventListener('mouseenter', handleMouseEnter); clickableElements.forEach((el) => {
el.addEventListener('mouseleave', handleMouseLeave); el.addEventListener('mouseenter', handleMouseEnter);
}); el.addEventListener('mouseleave', handleMouseLeave);
});
}, 200); // 延时 200ms 执行
// 动画循环：延迟更新小白点位置 // 动画循环：延迟更新小白点位置
const updateDotPosition = () => { const updateDotPosition = () => {
@@ -58,6 +62,9 @@ const CursorDot = () => {
// 清理函数 // 清理函数
return () => { return () => {
document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mousemove', handleMouseMove);
const clickableElements = document.querySelectorAll(
'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
);
clickableElements.forEach((el) => { clickableElements.forEach((el) => {
el.removeEventListener('mouseenter', handleMouseEnter); el.removeEventListener('mouseenter', handleMouseEnter);
el.removeEventListener('mouseleave', handleMouseLeave); el.removeEventListener('mouseleave', handleMouseLeave);