MediaWiki:Common.js

Selfice留言 | 贡献2024年10月28日 (一) 22:01的版本

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

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:Ctrl-F5
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// 检查当前页面是否为首页
if (mw.config.get('wgPageName') === '首页') {
	// 在指定页面上运行的JavaScript代码
	document.addEventListener('DOMContentLoaded', function() {
		const div = document.querySelector('.rotating-div');
		if (!div) return;  // 确保元素存在
	
		div.addEventListener('mousemove', (event) => {
			const rect = div.getBoundingClientRect();
			const x = event.clientX - rect.left - rect.width / 2;
			const y = event.clientY - rect.top - rect.height / 2;
			
			const maxAngle = 8;
			const xAngle = (maxAngle * x) / (rect.width / 2);
			const yAngle = -(maxAngle * y) / (rect.height / 2);
			
			const distance = Math.sqrt(x*x + y*y);
			const maxDistance = Math.sqrt((rect.width / 2) ** 2 + (rect.height / 2) ** 2);
			const colorIntensity = Math.min(1, distance / maxDistance);
			const colorValue = 153 + (102 * colorIntensity);
	
			div.style.transform = `rotateX(${yAngle}deg) rotateY(${xAngle}deg)`;
			div.style.backgroundColor = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
		});
	
		div.addEventListener('mouseleave', () => {
			div.style.transform = 'rotateX(0deg) rotateY(0deg)';
			div.style.backgroundColor = '#999';
		});
	});
}