精致鼠标动效
// ==UserScript==
// @name 精致鼠标动效
// @namespace https://bbs.tampermonkey.net.cn/
// @version 1.3.0
// @description 为所有网页添加精致鼠标动效
// @author 雪中明月
// @match *
// ==/UserScript==
(function () {
'use strict';
// 变量
var mouse_circle_1 = ''
var mouse_circle_2 = ''
var cx = 0, cy = 0
var mouseX = 0, mouseY = 0
function hideCursor() {
// 设置默认光标隐藏
document.querySelectorAll("*")
.forEach(element => {
element.style.cursor = "none"
});
}
function creatNewCursor() {
// 创建元素
mouse_circle_1 = document.createElement("div")
mouse_circle_2 = document.createElement("div")
mouse_circle_1.style = `
position: fixed;
background: rgba(255, 255, 255,0.6);
backdrop-filter: blur(10px);
border-radius: 999px;
height: 20px;
width: 20px;
opacity: 0;
transition: transform 0.5s,opacity 0.3s;
z-index: 999;
pointer-events: none;
transform: translate(-50%, -50%);
`
mouse_circle_2.style = `
position: fixed;
background: transparent;
border: rgba(255, 255, 255,0.3) 2px solid;
border-radius: 999px;
height: 50px;
width: 50px;
opacity: 0;
transition: transform 0.2s,opacity 0.3s;
z-index: 999;
pointer-events: none;
transform: translate(-50%, -50%);
`
document.body.appendChild(mouse_circle_1)
document.body.appendChild(mouse_circle_2)
}
function smallCircleMove() {
// 鼠标移动监听事件
document.addEventListener("mousemove", function (e) {
mouseX = e.clientX // 获取当前鼠标位置
mouseY = e.clientY
mouse_circle_1.style.opacity = 1 // 移动时光标淡入
mouse_circle_2.style.opacity = 1
mouse_circle_1.style.left = `${mouseX}px` // 小圆的移动
mouse_circle_1.style.top = `${mouseY}px`
})
// 鼠标出入监听事件
document.addEventListener("mouseleave", function () {
mouse_circle_1.style.opacity = 0 // 离开网页光标淡出
mouse_circle_2.style.opacity = 0
})
// 鼠标点击监听事件
document.addEventListener("mousedown", function () {
mouse_circle_1.style.transform = "translate(-50%, -50%) scale(0.8)" // 缩小
setTimeout(() => {
mouse_circle_2.style.transform = "translate(-50%, -50%) scale(0.8)"
}, 200);
})
document.addEventListener("mouseup", function () {
mouse_circle_1.style.transform = "translate(-50%, -50%) scale(1)" // 回正
setTimeout(() => {
mouse_circle_2.style.transform = "translate(-50%, -50%) scale(1)"
}, 200);
})
}
function bigCircleMove() {
// 大圆的延迟移动
var ca = () => {
cx += (mouseX - cx) / 10
cy += (mouseY - cy) / 10
mouse_circle_2.style.left = `${cx}px`
mouse_circle_2.style.top = `${cy}px`
window.requestAnimationFrame(ca)
}
window.requestAnimationFrame(ca)
}
function initCursorAutoDark() {
// 检测是否深色
if (!window.matchMedia) { return }
function change_cursor() {
if (!darkModeQuery.matches) {
mouse_circle_1.style.background = "rgba(0, 0, 0,0.6)"
mouse_circle_2.style.border = "rgba(0, 0, 0,0.3) 2px solid"
} else {
mouse_circle_1.style.background = "rgba(255, 255, 255,0.6)"
mouse_circle_2.style.border = "rgba(255, 255, 255,0.3) 2px solid"
}
}
var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
change_cursor()
darkModeQuery.addListener(function () {
change_cursor()
});
}
// 检测是否桌面端
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobile) {
// 创建光标元素
hideCursor()
creatNewCursor()
// 添加内圈跟随
smallCircleMove()
// 设置外圈跟随
bigCircleMove()
// 自动深色
initCursorAutoDark()
}
})();