|
|
| （未显示同一用户的4个中间版本） |
| 第12行： |
第12行： |
| /* INFOBOX */ | | /* INFOBOX */ |
| $('.infobox').hide(); | | $('.infobox').hide(); |
|
| |
| // 将下面的代码整体复制到下一步要创建的 .js 页面中
| |
| (function(mw, $) {
| |
| // 确保页面加载完成后再执行
| |
| mw.hook('wikipage.content').add(function() {
| |
| // 1. 创建光标的HTML结构
| |
| if (document.querySelector('.magnetic-pointer')) return;
| |
| const pointerDiv = document.createElement('div');
| |
| pointerDiv.className = 'magnetic-pointer';
| |
| pointerDiv.innerHTML = '<div></div><div></div><div></div><div></div>';
| |
| document.body.appendChild(pointerDiv);
| |
|
| |
| // 2. 注入光标专属的CSS样式
| |
| const style = `
| |
| .magnetic-pointer {
| |
| --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: 9999;
| |
| }
| |
| .magnetic-pointer div {
| |
| position: absolute;
| |
| width: 1rem;
| |
| height: 1rem;
| |
| border-width: 0.3rem;
| |
| border-color: #17f700;
| |
| }
| |
| .magnetic-pointer div:nth-child(1) { top: 0; left: 0; border-top-style: solid; border-left-style: solid; }
| |
| .magnetic-pointer div:nth-child(2) { top: 0; right: 0; border-top-style: solid; border-right-style: solid; }
| |
| .magnetic-pointer div:nth-child(3) { bottom: 0; left: 0; border-bottom-style: solid; border-left-style: solid; }
| |
| .magnetic-pointer div:nth-child(4) { bottom: 0; right: 0; border-bottom-style: solid; border-right-style: solid; }
| |
| .mw-target-hover { cursor: pointer; } /* 为可吸附元素增加光标提示 */
| |
| `;
| |
| if (!document.getElementById('magnetic-pointer-styles')) {
| |
| const styleSheet = document.createElement('style');
| |
| styleSheet.id = 'magnetic-pointer-styles';
| |
| styleSheet.textContent = style;
| |
| document.head.appendChild(styleSheet);
| |
| }
| |
|
| |
| // 3. 光标逻辑
| |
| const pointer = document.querySelector('.magnetic-pointer');
| |
| let currentTarget = null;
| |
|
| |
| const move = (e) => {
| |
| let x = e.clientX, 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;
| |
| }
| |
| if (pointer) pointer.style.transform = `translate(${x}px, ${y}px)`;
| |
| };
| |
|
| |
| const bindTargets = () => {
| |
| document.querySelectorAll('.mw-target-hover').forEach(el => {
| |
| el.removeEventListener('mouseenter', onMouseEnter);
| |
| el.removeEventListener('mouseleave', onMouseLeave);
| |
| el.addEventListener('mouseenter', onMouseEnter);
| |
| el.addEventListener('mouseleave', onMouseLeave);
| |
| });
| |
| };
| |
|
| |
| const onMouseEnter = (e) => {
| |
| currentTarget = e.currentTarget;
| |
| const rect = currentTarget.getBoundingClientRect();
| |
| if (pointer) {
| |
| pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
| |
| pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
| |
| }
| |
| };
| |
|
| |
| const onMouseLeave = () => {
| |
| currentTarget = null;
| |
| if (pointer) {
| |
| pointer.style.setProperty('--width', '4rem');
| |
| pointer.style.setProperty('--height', '4rem');
| |
| }
| |
| };
| |
|
| |
| window.addEventListener('mousemove', move);
| |
| // 监听页面内容变化，重新绑定目标元素
| |
| const observer = new MutationObserver(bindTargets);
| |
| observer.observe(document.body, { childList: true, subtree: true });
| |
| bindTargets();
| |
| });
| |
| })(window.mediaWiki, window.jQuery);
| |
