MediaWiki:Common.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

// 检查当前页面是否为首页
if (mw.config.get('wgPageName') === '首页') {
    // 在指定页面上运行的JavaScript代码
	const rotatingDiv = document.getElementById('rotatingDiv');
	
	let currentX = 0;
	let currentY = 0;
	
	rotatingDiv.addEventListener('mousemove', (event) => {
		const rect = rotatingDiv.getBoundingClientRect();
		const x = event.clientX - rect.left - rect.width / 2;
		const y = event.clientY - rect.top - rect.height / 2;
	
		// 计算目标角度并限制在±8度
		const targetX = Math.max(-8, Math.min(8, -y / 30));
		const targetY = Math.max(-8, Math.min(8, x / 30));
	
		// 使用缓动算法逐步接近目标角度
		currentX += (targetX - currentX) * 0.05; // 速度减慢
		currentY += (targetY - currentY) * 0.05; // 速度减慢
	
		// 计算颜色变化
		const distance = Math.sqrt(x * x + y * y);
		const maxDistance = Math.sqrt((rect.width / 2) ** 2 + (rect.height / 2) ** 2);
		const colorRatio = Math.min(1, distance / maxDistance);
		const r = Math.floor(52 + (153 - 52) * colorRatio);
		const g = Math.floor(152 + (153 - 152) * colorRatio);
		const b = Math.floor(219 + (153 - 219) * colorRatio);
	
		// 应用3D旋转和背景颜色变化
		rotatingDiv.style.transform = `rotateX(${currentX}deg) rotateY(${currentY}deg)`;
		rotatingDiv.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
	
		// 让文本颜色也逐渐变为灰色
		rotatingDiv.style.color = `rgb(${255 - (255 - 153) * colorRatio}, ${255 - (255 - 153) * colorRatio}, ${255 - (255 - 153) * colorRatio})`;
	});
	
	rotatingDiv.addEventListener('mouseleave', () => {
		// 鼠标离开时恢复初始状态
		currentX = 0;
		currentY = 0;
		rotatingDiv.style.transform = `rotateX(0deg) rotateY(0deg)`;
		rotatingDiv.style.backgroundColor = `#3498db`;
		rotatingDiv.style.color = `white`;
	});
}