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

/* 这里所有JavaScript都会加载给Citizen皮肤的用户 */
(function() {
    mw.loader.using('jquery', function() {
        $(function() {
            if (document.querySelector('.magnetic-pointer-original')) return;

            // 光标 DOM
            const pointer = document.createElement('div');
            pointer.className = 'magnetic-pointer-original';
            pointer.innerHTML = '<div></div><div></div><div></div><div></div>';
            document.body.appendChild(pointer);

            // 样式：纯空心四角角标
            const style = document.createElement('style');
            style.textContent = `
.magnetic-pointer-original {
    --width: 48px;
    --height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    transform-origin: center center;
    transition: transform 0.22s ease, width 0.22s ease, height 0.22s ease;
    pointer-events: none !important;
    z-index: 999999 !important;
    will-change: transform, width, height;
}
.magnetic-pointer-original div {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #17f700;
    background: transparent !important;
    box-sizing: border-box;
}
.magnetic-pointer-original div:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.magnetic-pointer-original div:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.magnetic-pointer-original div:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.magnetic-pointer-original div:nth-child(4) { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }
            `;
            document.head.appendChild(style);

            let target = null;
            let mouseX = 0, mouseY = 0;
            let cursorX = 0, cursorY = 0;

            // 鼠标位置实时更新
            window.addEventListener('mousemove', (e) => {
                mouseX = e.clientX;
                mouseY = e.clientY;
            });

            // 平滑跟随循环
            function update() {
                if (target) {
                    const rect = target.getBoundingClientRect();
                    const cx = rect.left + rect.width / 2;
                    const cy = rect.top + rect.height / 2;

                    cursorX += (cx - cursorX) * 0.2;
                    cursorY += (cy - cursorY) * 0.2;

                    pointer.style.width = rect.width + 12 + 'px';
                    pointer.style.height = rect.height + 12 + 'px';
                } else {
                    cursorX += (mouseX - cursorX) * 0.25;
                    cursorY += (mouseY - cursorY) * 0.25;
                    pointer.style.width = '48px';
                    pointer.style.height = '48px';
                }

                pointer.style.transform = `translate(${cursorX - pointer.offsetWidth/2}px, ${cursorY - pointer.offsetHeight/2}px)`;
                requestAnimationFrame(update);
            }
            update();

            // 👇 这是 Citizen 皮肤真正的按钮选择器（全覆盖）
            const citizenSelectors = [
                ".citizen-button",
                ".citizen-ui-btn",
                ".citizen-nav__item a",
                ".citizen-menu__item a",
                "#citizen-header a",
                "#citizen-sidebar a",
                "a.citizen-button",
                "button.citizen-button",
                ".mw-editsection a",
                ".mw-ui-button",
                ".citizen-btn"
            ].join(",");

            function bind() {
                document.querySelectorAll(citizenSelectors).forEach(el => {
                    if (el._magnet) return;
                    el._magnet = 1;

                    el.addEventListener("mouseenter", () => {
                        target = el;
                    });
                    el.addEventListener("mouseleave", () => {
                        target = null;
                    });
                });
            }

            bind();
            new MutationObserver(bind).observe(document.body, { childList: true, subtree: true });
        });
    });
})();