查看“︁MediaWiki:Common.js”︁的源代码

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

/* USERNAME */
$( function() {
    if ( mw.user.isNamed() ) {
        $( '.insertusername' ).text( mw.user.getName() );
    } else {
        $( '.insertusername' ).text( '访客' );
    }
} );

/* INFOBOX */
$('.infobox').hide();

(function() {
    // 等待页面加载完成
    $(function() {
        // 如果已经存在光标元素，不再重复创建
        if (document.querySelector('.magnetic-pointer-original')) return;

        // 1. 创建光标容器
        const pointer = document.createElement('div');
        pointer.className = 'magnetic-pointer-original';
        pointer.innerHTML = '<div></div><div></div><div></div><div></div>';
        document.body.appendChild(pointer);

        // 2. 注入样式（完全按照你的原始设计）
        const style = document.createElement('style');
        style.textContent = `
            .magnetic-pointer-original {
                --width: 4rem;
                --height: 4rem;
                position: fixed;
                top: calc(var(--height) / -2);
                left: calc(var(--width) / -2);
                width: var(--width);
                height: var(--height);
                transition: all 0.2s ease-out;
                pointer-events: none;
                z-index: 99999;
            }
            .magnetic-pointer-original div {
                position: absolute;
                width: 1rem;
                height: 1rem;
                border-width: 0.3rem;
                border-color: #17f700;
            }
            .magnetic-pointer-original div:nth-child(1) { top: 0; left: 0; border-top-style: solid; border-left-style: solid; }
            .magnetic-pointer-original div:nth-child(2) { top: 0; right: 0; border-top-style: solid; border-right-style: solid; }
            .magnetic-pointer-original div:nth-child(3) { bottom: 0; left: 0; border-bottom-style: solid; border-left-style: solid; }
            .magnetic-pointer-original div:nth-child(4) { bottom: 0; right: 0; border-bottom-style: solid; border-right-style: solid; }
        `;
        document.head.appendChild(style);

        let currentTarget = null;
        let currentX = 0, currentY = 0;  // 用于跟随的变量

        // 鼠标移动时的磁性计算（完全复制你的逻辑）
        const onMouseMove = function(e) {
            let x = e.clientX;
            let y = e.clientY;
            if (currentTarget) {
                const rect = currentTarget.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                x = centerX + (x - centerX) * 0.1;
                y = centerY + (y - centerY) * 0.1;
            }
            currentX = x;
            currentY = y;
            pointer.style.transform = `translate(${currentX}px, ${currentY}px)`;
        };

        // 进入目标元素
        const onMouseEnter = function(e) {
            currentTarget = e.currentTarget;
            const rect = currentTarget.getBoundingClientRect();
            // 这里的 innerWidth/50 对应你原始代码中的内边距效果
            pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
            pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
        };

        // 离开目标元素
        const onMouseLeave = function() {
            currentTarget = null;
            pointer.style.setProperty('--width', '4rem');
            pointer.style.setProperty('--height', '4rem');
        };

        // 绑定所有 ._target 元素的事件（支持动态加载的内容）
        const bindTargets = function() {
            document.querySelectorAll('._target').forEach(el => {
                // 避免重复绑定
                if (el._magneticBound) return;
                el._magneticBound = true;
                el.addEventListener('mouseenter', onMouseEnter);
                el.addEventListener('mouseleave', onMouseLeave);
            });
        };

        // 监听全局鼠标移动
        window.addEventListener('mousemove', onMouseMove);

        // 初始绑定
        bindTargets();

        // 监听页面内容变化（例如通过 AJAX 加载的章节）
        const observer = new MutationObserver(function(mutations) {
            bindTargets();
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();