鼠标演示

更富有弹性的光标
当前为 2024-02-24 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         鼠标演示
// @namespace    https://www.cnblogs.com/thetheOrange
// @version      2024-01-25
// @description  更富有弹性的光标
// @author       thetheOrange
// @match        *://*/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 创建一个鼠标演示指针
    const body = document.querySelector("body");
    const cursor = document.createElement("div");
    // 添加样式
    cursor.setAttribute("style",`
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: 250ms cubic-bezier(0.555, 1.600, 0.370, 0.915) all;
    opacity: 0.2;
    pointer-events: none;
    z-index:10000`);
    // 插入元素
    body.appendChild(cursor);
    // 绑定鼠标移动事件
    document.addEventListener("mousemove", (event)=>{
        cursor.style.top = `${event.pageY}px`;
        cursor.style.left = `${event.pageX}px`;
    });
    // 绑定鼠标长按事件
    let ori_width = parseInt(getComputedStyle(cursor).width);
    let ori_height = parseInt(getComputedStyle(cursor).height);
    document.addEventListener("mousedown", () => {
        cursor.style.width = (parseInt(getComputedStyle(cursor).width) + 100) + "px";
        cursor.style.height = (parseInt(getComputedStyle(cursor).height) + 100) + "px";
        })
    document.addEventListener("mouseup", () => {
        // 恢复到原来的宽高
        cursor.style.width = ori_width + "px";
        cursor.style.height = ori_height + "px";
        })
})();