打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
OnlyOTO留言 | 贡献
无编辑摘要
标签已被回退
OnlyOTO留言 | 贡献
无编辑摘要
标签已被回退
第14行: 第14行:


(function() {
(function() {
     // 等待页面加载完成
     // 等待 jQuery 加载完成(MediaWiki 自带 jQuery)
     $(function() {
     mw.loader.using('jquery', function() {
        // 如果已经存在光标元素,不再重复创建
        $(function() {
        if (document.querySelector('.magnetic-pointer-original')) return;
            // 防止重复创建光标
            if (document.querySelector('.magnetic-pointer-original')) return;


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


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


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


        // 鼠标移动时的磁性计算(完全复制你的逻辑)
            // 鼠标移动:磁性跟随
        const onMouseMove = function(e) {
            const onMouseMove = function(e) {
            let x = e.clientX;
                let x = e.clientX;
            let y = e.clientY;
                let y = e.clientY;
            if (currentTarget) {
                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();
                 const rect = currentTarget.getBoundingClientRect();
                 const centerX = rect.left + rect.width / 2;
                 pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
                const centerY = rect.top + rect.height / 2;
                 pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
                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) {
            const onMouseLeave = function() {
            currentTarget = e.currentTarget;
                currentTarget = null;
            const rect = currentTarget.getBoundingClientRect();
                pointer.style.setProperty('--width', '4rem');
            // 这里的 innerWidth/50 对应你原始代码中的内边距效果
                pointer.style.setProperty('--height', '4rem');
            pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
            };
            pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
        };


        // 离开目标元素
            // 绑定磁性目标 ._target
        const onMouseLeave = function() {
            const bindTargets = function() {
            currentTarget = null;
                document.querySelectorAll('._target').forEach(el => {
            pointer.style.setProperty('--width', '4rem');
                    if (el._magneticBound) return;
            pointer.style.setProperty('--height', '4rem');
                    el._magneticBound = true;
        };
                    el.addEventListener('mouseenter', onMouseEnter);
                    el.addEventListener('mouseleave', onMouseLeave);
                });
            };


        // 绑定所有 ._target 元素的事件(支持动态加载的内容)
            // 全局监听鼠标移动
        const bindTargets = function() {
             window.addEventListener('mousemove', onMouseMove);
             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();
 
        // 初始绑定
        bindTargets();


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

2026年3月31日 (二) 15:54的版本

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

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

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

(function() {
    // 等待 jQuery 加载完成(MediaWiki 自带 jQuery)
    mw.loader.using('jquery', 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();
                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();

            // 监听页面内容变化(支持动态加载)
            const observer = new MutationObserver(bindTargets);
            observer.observe(document.body, { childList: true, subtree: true });
        });
    });
})();