鼠标跟随 | Pardofelis

效果展示

即为蓝色猫猫虫，如果没有看到，可以右键，选择跟随我按钮

代码展示

配置

STATIC_URL - 追到鼠标时显示的（支持GIF）
WALKING_GIF - 没追到鼠标时显示的（支持GIF）
easing - 从0.01到0.1，越大速度越快，太快的话会卡顿

开关该功能的函数：

1	toggleCat()

代码

(function() {
    // 1. 移动端直接屏蔽
    if (window.innerWidth < 768) return;

    // --- 配置区域 ---
    const STATIC_URL = '/img/sleep.jpg'; 
    const WALKING_GIF = '/img/run.jpg';
    const easing = 0.05;
    
    // --- 状态初始化 ---
    let isCatActive = localStorage.getItem('cat-active') !== 'false';
    let targetX = window.innerWidth / 2, targetY = window.innerHeight / 2;
    let currentX = window.innerWidth / 2, currentY = window.innerHeight / 2;
    let isMoving = false;
    let animationId = null;

    // 2. 创建 DOM 元素
    const catContainer = document.createElement('div');
    catContainer.id = 'hexo-cat-container';
    catContainer.style.cssText = `position:fixed; z-index:9998; pointer-events:none; user-select:none; display:${isCatActive ? 'block' : 'none'};`;
    catContainer.innerHTML = `<img id="hexo-cat-img" src="${STATIC_URL}" style="width:60px; height:auto; transition:transform 0.2s; will-change:transform;">`;
    document.body.appendChild(catContainer);
    const img = document.getElementById('hexo-cat-img');

    // 3. 核心功能函数：每运行一次切换一次状态
    window.toggleCat = function() {
        isCatActive = !isCatActive;
        localStorage.setItem('cat-active', isCatActive); // 记住用户的选择
        
        if (isCatActive) {
            catContainer.style.display = 'block';
            // 重新开启时同步坐标，防止从上个消失点闪现
            currentX = targetX;
            currentY = targetY;
            console.log("小猫已召唤 🐱");
        } else {
            catContainer.style.display = 'none';
            console.log("小猫已躲起来了 💤");
        }
    };

    // 4. 事件监听
    window.addEventListener('mousemove', (e) => {
        if (!isCatActive) return;
        targetX = e.clientX;
        targetY = e.clientY;
    });

    // 5. 动画循环
    function animate() {
        if (isCatActive) {
            const dx = targetX - currentX;
            const dy = targetY - currentY;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance > 1.5) {
                if (!isMoving) { img.src = WALKING_GIF; isMoving = true; }
                if (Math.abs(dx) > 0.5) img.style.transform = dx > 0 ? 'scaleX(-1)' : 'scaleX(1)';
            } else {
                if (isMoving) { img.src = STATIC_URL; isMoving = false; }
            }

            currentX += dx * easing;
            currentY += dy * easing;
            catContainer.style.left = `${currentX - 30}px`;
            catContainer.style.top = `${currentY - 30}px`;
        }
        requestAnimationFrame(animate);
    }

    animate();
})();