|
|
| 第12行： |
第12行： |
| /* INFOBOX */ | | /* INFOBOX */ |
| $('.infobox').hide(); | | $('.infobox').hide(); |
|
| |
| (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);
| |
|
| |
| // 终极修复CSS：纯镂空四角 + 适配Citizen层级
| |
| 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: 999999 !important; /* 压过Citizen所有弹窗/导航 */
| |
| }
| |
| /* 四角拐角 - 杜绝方块 */
| |
| .magnetic-pointer-original div {
| |
| position: absolute;
| |
| width: 12px;
| |
| height: 12px;
| |
| border-color: #17f700;
| |
| background: transparent !important;
| |
| box-shadow: none !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| .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;}
| |
|
| |
| /* 锁定Citizen皮肤所有按钮为磁吸目标 */
| |
| .citizen-button,
| |
| .citizen-ui-button,
| |
| .citizen-nav-item a,
| |
| .citizen-menu-item a,
| |
| #citizen-header a,
| |
| #citizen-sidebar a,
| |
| .vector-tabs a,
| |
| .mw-editsection,
| |
| a.citizen-link-button {
| |
| position: relative !important;
| |
| }
| |
| `;
| |
| 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.12; // 微调吸附顺滑度
| |
| y = centerY + (y - centerY) * 0.12;
| |
| }
| |
| currentX = x;
| |
| currentY = y;
| |
| pointer.style.transform = `translate(${currentX}px, ${currentY}px)`;
| |
| };
| |
|
| |
| const onMouseEnter = function(e) {
| |
| currentTarget = e.currentTarget;
| |
| const rect = currentTarget.getBoundingClientRect();
| |
| // 贴合Citizen按钮间距，放大留白更自然
| |
| const gap = window.innerWidth / 60;
| |
| pointer.style.setProperty('--width', rect.width + gap + 'px');
| |
| pointer.style.setProperty('--height', rect.height + gap + 'px');
| |
| };
| |
|
| |
| const onMouseLeave = function() {
| |
| currentTarget = null;
| |
| pointer.style.setProperty('--width', '4rem');
| |
| pointer.style.setProperty('--height', '4rem');
| |
| };
| |
|
| |
| // 自动绑定：Citizen全系列按钮 + 原有自定义_target
| |
| const bindCitizenButtons = function() {
| |
| const selector = `
| |
| .citizen-button:not([data-bound]),
| |
| .citizen-ui-button:not([data-bound]),
| |
| .citizen-nav-item a:not([data-bound]),
| |
| .citizen-menu-item a:not([data-bound]),
| |
| #citizen-header a:not([data-bound]),
| |
| #citizen-sidebar a:not([data-bound]),
| |
| .mw-editsection:not([data-bound]),
| |
| a.citizen-link-button:not([data-bound]),
| |
| ._target:not([data-bound])
| |
| `;
| |
| document.querySelectorAll(selector).forEach(el => {
| |
| el.dataset.bound = "1";
| |
| el.addEventListener('mouseenter', onMouseEnter);
| |
| el.addEventListener('mouseleave', onMouseLeave);
| |
| });
| |
| };
| |
|
| |
| // 全局鼠标监听
| |
| window.addEventListener('mousemove', onMouseMove);
| |
|
| |
| // 初始绑定
| |
| bindCitizenButtons();
| |
|
| |
| // 监听动态加载（侧边栏折叠/展开、AJAX页面、弹窗）
| |
| const observer = new MutationObserver(() => bindCitizenButtons());
| |
| observer.observe(document.body, { childList: true, subtree: true, attributes: true });
| |
| });
| |
| });
| |
| })();
| |
