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

MediaWiki:Citizen.js:修订间差异

MediaWiki界面页面
OnlyOTO留言 | 贡献
无编辑摘要
标签已被回退
OnlyOTO留言 | 贡献
无编辑摘要
标签手工回退 已被回退
第3行: 第3行:
const allowPages = [
const allowPages = [
   "首页",
   "首页",
   "Main Page"
   "Main Page",
  "你的自定义首页名字"
];
];
const currentPage = mw.config.get("wgTitle");
const currentPage = mw.config.get("wgTitle");


if( !allowPages.includes(currentPage) ){
if( !allowPages.includes(currentPage) ){
第14行: 第16行:


mw.loader.using( [], function() {
mw.loader.using( [], function() {
    // 创建四角光标
     const ptr = document.createElement('div');
     const ptr = document.createElement('div');
     ptr.className = 'magnetic-true-corner';
     ptr.className = 'magnetic-true-corner';
第19行: 第22行:
     document.body.appendChild(ptr);
     document.body.appendChild(ptr);


    // 样式
     const css = document.createElement('style');
     const css = document.createElement('style');
     css.textContent = `
     css.textContent = `
body, body * { cursor: none !important; }
 
/* 隐藏浏览器原生光标 */
body {
  cursor: none !important;
}
* {
  cursor: none !important;
}
 
@keyframes rotateLoop {
  from { transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}


.magnetic-true-corner{
.magnetic-true-corner{
第29行: 第45行:
     pointer-events:none;
     pointer-events:none;
     z-index:999999!important;
     z-index:999999!important;
     /* 暂时关掉旋转,保证能显示 */
     animation: rotateLoop 8s linear infinite; /* 转圈:8秒一圈,可改速度 */
}
}
.magnetic-true-corner i{
.magnetic-true-corner i{
第47行: 第63行:
     let hoverEl = null;
     let hoverEl = null;
     let mx = 0, my = 0;
     let mx = 0, my = 0;
    // 光标缓冲坐标
     let smoothX = 0, smoothY = 0;
     let smoothX = 0, smoothY = 0;
     let curW = 40, curH = 40;
     let curW = 40, curH = 40;


    // 鼠标实时位置
     document.addEventListener('mousemove', e => {
     document.addEventListener('mousemove', e => {
         mx = e.clientX;
         mx = e.clientX;
第55行: 第73行:
     });
     });


    // 顺滑帧磁吸缓冲
     function loop(){
     function loop(){
         const ease = 0.15;
         const ease = 0.15; // 磁吸顺滑度
         if(hoverEl){
         if(hoverEl){
            // 吸附到元素中心 + 缓冲
             const r = hoverEl.getBoundingClientRect();
             const r = hoverEl.getBoundingClientRect();
             const targetX = r.left + r.width / 2;
             const targetX = r.left + r.width / 2;
第66行: 第86行:
             curH = r.height;
             curH = r.height;


            // 四角框
             ptr.style.left = (smoothX - curW / 2) + 'px';
             ptr.style.left = (smoothX - curW / 2) + 'px';
             ptr.style.top = (smoothY - curH / 2) + 'px';
             ptr.style.top = (smoothY - curH / 2) + 'px';
第71行: 第92行:
             ptr.style.height = curH + 'px';
             ptr.style.height = curH + 'px';
         }else{
         }else{
            // 常态跟随鼠标
             curW = 40;
             curW = 40;
             curH = 40;
             curH = 40;
第77行: 第99行:


             ptr.style.left = (smoothX - 20) + 'px';
             ptr.style.left = (smoothX - 20) + 'px';
             ptr.style.top = (my - 20) + 'px';
             ptr.style.top = (smoothY - 20) + 'px';
             ptr.style.width = curW + 'px';
             ptr.style.width = curW + 'px';
             ptr.style.height = curH + 'px';
             ptr.style.height = curH + 'px';
第86行: 第108行:


const sel = [
const sel = [
     '.citizen-nav a','.citizen-menu a','.citizen-button',
    // 官方皮肤按钮
     '.citizen-action-button','.cdx-button','.mw-editsection a',
     '.citizen-nav a',
     '#citizen-header__nav a','.citizen-sidebar a','._target',
    '.citizen-menu a',
     '.commentstreams-button','.commentstreams-submit',
    '.citizen-button',
     '.commentstreams-header button','.commentstreams-box button',
     '.citizen-action-button',
     '.mw-ui-button','button','a[role="button"]'
    '.cdx-button',
    '.mw-editsection a',
     '#citizen-header__nav a',
    '.citizen-sidebar a',
   
    // 自己加的 _target
    '._target',
   
    // Commentstreams扩展
     '.commentstreams-button',
    '.commentstreams-submit',
     '.commentstreams-header button',
    '.commentstreams-box button',
   
    // 常用
     '.mw-ui-button',
    'button',
    'a[role="button"]'
].join(',');
].join(',');


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

2026年3月31日 (二) 23:16的版本

(function() {
// 页面白名单
const allowPages = [
  "首页",
  "Main Page",
  "你的自定义首页名字"
];
const currentPage = mw.config.get("wgTitle");


if( !allowPages.includes(currentPage) ){
  return;
}
if( window.magneticCursorInit ) return;
window.magneticCursorInit = true;

mw.loader.using( [], function() {
    // 创建四角光标
    const ptr = document.createElement('div');
    ptr.className = 'magnetic-true-corner';
    ptr.innerHTML = `<i></i><i></i><i></i><i></i>`;
    document.body.appendChild(ptr);

    // 样式
    const css = document.createElement('style');
    css.textContent = `

/* 隐藏浏览器原生光标 */
body {
  cursor: none !important;
}
* {
  cursor: none !important;
}

@keyframes rotateLoop {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.magnetic-true-corner{
    position:fixed;
    left:0;top:0;
    width:0;height:0;
    pointer-events:none;
    z-index:999999!important;
    animation: rotateLoop 8s linear infinite; /* 转圈:8秒一圈,可改速度 */
}
.magnetic-true-corner i{
    position:absolute;
    width:14px;height:14px;
    border:2px solid #888e99;
    background:transparent!important;
    box-shadow:none!important;
}
.magnetic-true-corner i:nth-child(1){top:-2px;left:-2px;border-right:none;border-bottom:none;}
.magnetic-true-corner i:nth-child(2){top:-2px;right:-2px;border-left:none;border-bottom:none;}
.magnetic-true-corner i:nth-child(3){bottom:-2px;left:-2px;border-right:none;border-top:none;}
.magnetic-true-corner i:nth-child(4){bottom:-2px;right:-2px;border-left:none;border-top:none;}
    `;
    document.head.appendChild(css);

    let hoverEl = null;
    let mx = 0, my = 0;
    // 光标缓冲坐标
    let smoothX = 0, smoothY = 0;
    let curW = 40, curH = 40;

    // 鼠标实时位置
    document.addEventListener('mousemove', e => {
        mx = e.clientX;
        my = e.clientY;
    });

    // 顺滑帧磁吸缓冲
    function loop(){
        const ease = 0.15; // 磁吸顺滑度
        if(hoverEl){
            // 吸附到元素中心 + 缓冲
            const r = hoverEl.getBoundingClientRect();
            const targetX = r.left + r.width / 2;
            const targetY = r.top + r.height / 2;
            smoothX += (targetX - smoothX) * ease;
            smoothY += (targetY - smoothY) * ease;
            curW = r.width;
            curH = r.height;

            // 四角框
            ptr.style.left = (smoothX - curW / 2) + 'px';
            ptr.style.top = (smoothY - curH / 2) + 'px';
            ptr.style.width = curW + 'px';
            ptr.style.height = curH + 'px';
        }else{
            // 常态跟随鼠标
            curW = 40;
            curH = 40;
            smoothX += (mx - smoothX) * ease;
            smoothY += (my - smoothY) * ease;

            ptr.style.left = (smoothX - 20) + 'px';
            ptr.style.top = (smoothY - 20) + 'px';
            ptr.style.width = curW + 'px';
            ptr.style.height = curH + 'px';
        }
        requestAnimationFrame(loop);
    }
    loop();

const sel = [
    // 官方皮肤按钮
    '.citizen-nav a',
    '.citizen-menu a',
    '.citizen-button',
    '.citizen-action-button',
    '.cdx-button',
    '.mw-editsection a',
    '#citizen-header__nav a',
    '.citizen-sidebar a',
    
    // 自己加的 _target 
    '._target',
    
    // Commentstreams扩展
    '.commentstreams-button',
    '.commentstreams-submit',
    '.commentstreams-header button',
    '.commentstreams-box button',
    
    // 常用
    '.mw-ui-button',
    'button',
    'a[role="button"]'
].join(',');

    function bind(){
        document.querySelectorAll(sel).forEach(el=>{
            if(el._magBind)return;
            el._magBind = 1;
            el.addEventListener('mouseenter', ()=> hoverEl = el);
            el.addEventListener('mouseleave', ()=> hoverEl = null);
        });
    }

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