From 1eab49d8bb94d268d2ab2d1ec5b442082b964cbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Thu, 30 Jun 2022 11:58:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=BC=A0=E6=A0=87=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=20#7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/cursor.css | 26 -------------- css/style.css | 20 +++++++++++ index.html | 9 ++--- js/cursor.js | 95 -------------------------------------------------- js/main.js | 17 +++++++++ 5 files changed, 42 insertions(+), 125 deletions(-) delete mode 100644 css/cursor.css delete mode 100644 js/cursor.js diff --git a/css/cursor.css b/css/cursor.css deleted file mode 100644 index 39a3ee7..0000000 --- a/css/cursor.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 02888ea..0ea0355 100644 --- a/css/style.css +++ b/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,") 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; diff --git a/index.html b/index.html index 49d5370..73de9dc 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,6 @@ - @@ -78,7 +77,10 @@
- + +
+
+
@@ -368,7 +370,7 @@
imsyy .top
-  v 3.0 +  v 3.2 @@ -492,7 +494,6 @@ - diff --git a/js/cursor.js b/js/cursor.js deleted file mode 100644 index 0d5c55f..0000000 --- a/js/cursor.js +++ /dev/null @@ -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,") 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() -})(); \ No newline at end of file diff --git a/js/main.js b/js/main.js index 0b3cffc..962dea6 100644 --- a/js/main.js +++ b/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 () {