天天看點

如何使用CSS和JavaScript制作自定義滑鼠光标

作者:新钛雲服

魏建民 翻譯

您是否曾經通路過一個網站并被其驚人的功能所震撼?其中之一可能是一個很酷的滑鼠光标,它不同于您習慣的正常箭頭或指針光标。

這确實可以改善使用者體驗,最近我一直想知道它是如何工作的。是以我開始做一些研究,我發現它是如何完成的。

在本文中,我将解釋如何制作自定義滑鼠光标。在本文結束時,您将學習如何使用CSS和JavaScript兩種不同的方法制作這些光标。然後,您将準備好使用不同的創意光标來充實您的網站,以保持您的觀衆的參與度。

如何使用CSS自定義滑鼠光标

使用CSS自定義滑鼠光标非常簡單,因為CSS已經有一個屬性來處理這個問題。我們需要做的就是識别這個屬性并使用它。作為前端工程師,我們經常使用這個屬性——它就是萬能的cursor屬性。是的,該屬性使我們能夠制作我們選擇的自定義光标。

在我們進入一個實際的例子之前,讓我們看一下與CSS cursor屬性相關的值。雖然大多數開發人員隻使用了一些重要的,但我們應該看看更多。

從上圖中,您可以看到每個CSS cursor屬性值名稱和對應的值的說明。

如何使用CSS和JavaScript制作自定義滑鼠光标

現在如何使用CSS自定義滑鼠光标?要使用它,您隻需告訴CSS您打算使用什麼圖像,并使用該url值将光标屬性指向圖像URL。

如何使用CSS和JavaScript制作自定義滑鼠光标

從上面的代碼片段中,你可以看到我在文檔正文上設定了這個,是以無論光标移動到哪裡,它都可以應用于光标。它具有指定的圖像url()。

該屬性的下一個值是備用,以防圖像未加載或可能由于某些内部故障而無法找到。我确定您不希望您的網站“無光标”,是以添加後備非常重要。您還可以添加盡可能多的後備URL。

如何使用CSS和JavaScript制作自定義滑鼠光标

您還可以在網頁的特定元素或部分上自定義光标。下面是一個 CodePen 示例:

如何使用CSS和JavaScript制作自定義滑鼠光标

這就是在CSS中自定義光标的全部内容。現在讓我們看看如何用 JavaScript 做到這一點。

如何使用JavaScript制作自定義滑鼠光标

要使用JavaScript實作這一點,您需要操作DOM以獲得所需的結果。

首先,讓我們看一下 HTML:

從上面的代碼片段中,我建立了兩個div來表示光标。計劃是從JavaScript操作這些 div,以便它們在網頁上的移動由 JavaScriptmousemove事件使用滑鼠移動的 X 和 Y 坐标滾動。

現在讓我們來看看 CSS 部分,這将是一件有意義的事情。

如何使用CSS設定自定義光标的樣式

看看上面的CSS代碼,我禁用了光标(還記得cursor:none嗎?)。這将使光标不可見,隻允許我們的自定義光标顯示。

我設計的divs樣式賦予它們獨特的“類似光标”的外觀。你絕對可以用它做更多的事情,如果有圖像,可以添加背景圖像、表情符号、貼紙等。現在,讓我們看一下JavaScript

如何使用 JavaScript 使光标移動

如何使用CSS和JavaScript制作自定義滑鼠光标

我在全局視窗對象上添加了一個事件監聽器來監聽任何滑鼠移動。當滑鼠移動時,moveCursor函數表達式被調用并接收事件對象作為參數。使用此參數,我能夠在頁面上的任何位置擷取滑鼠上的 X 和 Y 坐标。

我已經使用JavaScript從DOM中選擇了每種類型的光标querySelector。是以我所要做的就是根據滑鼠的 X 和 Y 坐标移動它們,方法是使用translate3d值控制樣式上的變換屬性。這将使div 在滑鼠移動到網頁上的任何點時移動。

您看到的反引号稱為模闆文字。這可以輕松編寫變量以将它們附加到字元串。另一種方法是将變量連接配接到字元串。

哪種方法效果最好?

現在由您作為開發人員來選擇最适合您的方法。如果您想使用一些漂亮的表情符号或圖像作為光标,您可以選擇使用CSS。另一方面,您可能想要使用JavaScript,這樣您就可以自定義您選擇的複雜形狀并為光标的移動設定動畫。

無論哪種方式都很好,隻要您獲得所需的結果并讓您網站的所有通路者驚歎。

*原文連結:https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

繼續閱讀