MediaWiki:Citizen.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 标签:已被回退 |
无编辑摘要 标签:手工回退 |
||
| (未显示同一用户的2个中间版本) | |||
| 第7行: | 第7行: | ||
]; | ]; | ||
const currentPage = mw.config.get("wgTitle"); | const currentPage = mw.config.get("wgTitle"); | ||
if( !allowPages.includes(currentPage) ){ | if( !allowPages.includes(currentPage) ){ | ||
| 第21行: | 第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; | cursor: none !important; | ||
} | } | ||
/* 防止输入框/按钮露馅,强制全局隐藏 */ | |||
/* | * { | ||
cursor: none !important; | |||
} | } | ||
.magnetic-true-corner{ | .magnetic-true-corner{ | ||
position:fixed; | |||
left:0;top:0; | |||
width:0;height:0; | |||
pointer-events:none; | |||
z-index:999999!important; | |||
} | |||
.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{ | .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;} | |||
} | |||
.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); | document.head.appendChild(css); | ||
| 第65行: | 第58行: | ||
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; | ||
| 第73行: | 第68行: | ||
}); | }); | ||
// 顺滑帧磁吸缓冲 | |||
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; | ||
| 第84行: | 第81行: | ||
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'; | ||
| 第89行: | 第87行: | ||
ptr.style.height = curH + 'px'; | ptr.style.height = curH + 'px'; | ||
}else{ | }else{ | ||
// 常态跟随鼠标 | |||
curW = 40; | curW = 40; | ||
curH = 40; | curH = 40; | ||
| 第104行: | 第103行: | ||
const sel = [ | const sel = [ | ||
// 官方皮肤按钮 | |||
'.citizen-nav a', | '.citizen-nav a', | ||
'.citizen-menu a', | '.citizen-menu a', | ||
| 第112行: | 第112行: | ||
'#citizen-header__nav a', | '#citizen-header__nav a', | ||
'.citizen-sidebar a', | '.citizen-sidebar a', | ||
// 自己加的 _target | |||
'._target', | '._target', | ||
// Commentstreams扩展 | |||
'.commentstreams-button', | '.commentstreams-button', | ||
'.commentstreams-submit', | '.commentstreams-submit', | ||
'.commentstreams-header button', | '.commentstreams-header button', | ||
'.commentstreams-box button', | '.commentstreams-box button', | ||
// 常用 | |||
'.mw-ui-button', | '.mw-ui-button', | ||
'button', | 'button', | ||
| 第126行: | 第132行: | ||
if(el._magBind)return; | if(el._magBind)return; | ||
el._magBind = 1; | el._magBind = 1; | ||
el.addEventListener('mouseenter', ()=> | el.addEventListener('mouseenter', ()=> hoverEl = el); | ||
el.addEventListener('mouseleave', ()=> hoverEl = null); | |||
el.addEventListener('mouseleave', ()=> | |||
}); | }); | ||
} | } | ||
2026年3月31日 (二) 23:17的最新版本
(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;
}
.magnetic-true-corner{
position:fixed;
left:0;top:0;
width:0;height:0;
pointer-events:none;
z-index:999999!important;
}
.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});
});
})();