修改鼠标样式 #7

css/cursor.css

@@ -1,26 +0,0 @@
-#cursor {
-    position: fixed;
-    width: 18px;
-    height: 18px;
-    background: #ffffffcc;
-    border-radius: 8px;
-    opacity: 0.25;
-    z-index: 99999999;
-    pointer-events: none;
-    transition: 0.2s ease-in-out;
-    transition-property: background, opacity, transform;
-}
-
-#cursor.hidden {
-    opacity: 0;
-}
-
-#cursor.hover {
-    opacity: 0.1;
-    /* transform: scale(1.2); */
-}
-
-#cursor.active {
-    opacity: 0.5;
-    transform: scale(0.5);
-}

css/style.css

@@ -34,6 +34,7 @@ body {
     margin: 0;
     padding: 0;
     background-color: #333;
+    overflow: hidden;
 }
 
 *,
@@ -44,6 +45,7 @@ p {
     color: #efefef;
     user-select: none;
     font-family: 'MiSans', sans-serif;
+    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important;
 }
 
 
@@ -72,6 +74,24 @@ a:hover {
     margin: 14px 0px;
 }
 
+/*鼠标样式*/
+#g-pointer-1 {
+    display: none;
+}
+
+#g-pointer-2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 18px;
+    transition: 0.05s linear;
+    pointer-events: none;
+    background: #ffffff40;
+    border-radius: 50%;
+    z-index: 9999999;
+}
+
 /*背景*/
 .bg-all {
     z-index: -1;

index.html

@@ -28,7 +28,6 @@
     <link rel="stylesheet" type="text/css" href="./css/mobile.css">
     <link rel="stylesheet" type="text/css" href="./css/loading.css">
     <link rel="stylesheet" type="text/css" href="./css/animation.css">
-    <link rel="stylesheet" type="text/css" href="./css/cursor.css">
     <link rel="icon" href="./favicon.ico">
     <link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
     <!-- Izitoast -->
@@ -78,6 +77,9 @@
             <img id="bg" onerror="this.classList.add('error');"></img>
             <div class="cover"></div>
         </div>
+        <!-- 鼠标指针 -->
+        <div id="g-pointer-1"></div>
+        <div id="g-pointer-2"></div>
         <!-- 主体内容 -->
         <main id="main" class="main">
             <div class="container" id="container">
@@ -368,7 +370,7 @@
                             <div class="img-title">
                                 <span class="img-title-big" id="logo-title-other">imsyy</span>
                                 <span class="img-text" id="logo-title-other-small">.top</span><br />
-                                <span class="img-text">&nbsp;v&nbsp;3.0</span>
+                                <span class="img-text">&nbsp;v&nbsp;3.2</span>
                                 <a href="https://github.com/imsyy/home" target="_blank">
                                     <i class="fa-brands fa-github"></i>
                                 </a>
@@ -492,7 +494,6 @@
     <script type="text/javascript" src="./js/set.js"></script>
     <script type="text/javascript" src="./js/time.js"></script>
     <script type="text/javascript" src="./js/js.cookie.js"></script>
-    <script type="text/javascript" src="./js/cursor.js"></script>
     <script type="text/javascript"
         src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
     </script>

js/cursor.js

@@ -1,95 +0,0 @@
-var CURSOR;
-
-Math.lerp = (a, b, n) => (1 - n) * a + n * b;
-
-const getStyle = (el, attr) => {
-    try {
-        return window.getComputedStyle ?
-            window.getComputedStyle(el)[attr] :
-            el.currentStyle[attr];
-    } catch (e) {}
-    return "";
-};
-
-class Cursor {
-    constructor() {
-        this.pos = {
-            curr: null,
-            prev: null
-        };
-        this.pt = [];
-        this.create();
-        this.init();
-        this.render();
-    }
-
-    move(left, top) {
-        this.cursor.style["left"] = `${left}px`;
-        this.cursor.style["top"] = `${top}px`;
-    }
-
-    create() {
-        if (!this.cursor) {
-            this.cursor = document.createElement("div");
-            this.cursor.id = "cursor";
-            this.cursor.classList.add("hidden");
-            document.body.append(this.cursor);
-        }
-
-        var el = document.getElementsByTagName('*');
-        for (let i = 0; i < el.length; i++)
-            if (getStyle(el[i], "cursor") == "pointer")
-                this.pt.push(el[i].outerHTML);
-
-        document.body.appendChild((this.scr = document.createElement("style")));
-        this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
-    }
-
-    refresh() {
-        this.scr.remove();
-        this.cursor.classList.remove("hover");
-        this.cursor.classList.remove("active");
-        this.pos = {
-            curr: null,
-            prev: null
-        };
-        this.pt = [];
-
-        this.create();
-        this.init();
-        this.render();
-    }
-
-    init() {
-        document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
-        document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
-        document.onmousemove = e => {
-            (this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
-            this.pos.curr = {
-                x: e.clientX - 8,
-                y: e.clientY - 8
-            };
-            this.cursor.classList.remove("hidden");
-        };
-        document.onmouseenter = e => this.cursor.classList.remove("hidden");
-        document.onmouseleave = e => this.cursor.classList.add("hidden");
-        document.onmousedown = e => this.cursor.classList.add("active");
-        document.onmouseup = e => this.cursor.classList.remove("active");
-    }
-
-    render() {
-        if (this.pos.prev) {
-            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.45);
-            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.45);
-            this.move(this.pos.prev.x, this.pos.prev.y);
-        } else {
-            this.pos.prev = this.pos.curr;
-        }
-        requestAnimationFrame(() => this.render());
-    }
-}
-
-(() => {
-    CURSOR = new Cursor();
-    // 需要重新获取列表时，使用 CURSOR.refresh()
-})();

js/main.js

@@ -23,6 +23,23 @@ iziToast.settings({
     iconColor: '#efefef',
 });
 
+/* 鼠标样式 */
+const body = document.querySelector("body");
+const element = document.getElementById("g-pointer-1");
+const element2 = document.getElementById("g-pointer-2");
+const halfAlementWidth = element.offsetWidth / 2;
+const halfAlementWidth2 = element2.offsetWidth / 2;
+
+function setPosition(x, y) {
+    element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)`;
+}
+
+body.addEventListener('mousemove', (e) => {
+    window.requestAnimationFrame(function () {
+        setPosition(e.clientX, e.clientY);
+    });
+});
+
 //加载完成后执行
 window.addEventListener('load', function () {