利用JavaScript實現(xiàn)獲取光標在當(dāng)前位置-功能

行效果：

運行效果

JavaScript核心代碼：

function dian() {

var oPoint=document.getElementById('d');

document.onmousemove=function(ev) {

var

ev=ev || window.event,

iX=ev.clientX,

iY=ev.clientY;

oPoint.innerHTML=iX + ',' + iY;

}

dian();

</script>

HTML代碼：

鼠標光標當(dāng)前位置：<span id="d">1,1</span>

得寫的可以的同學(xué)請點一手關(guān)注，每天分享大量前端知識

在瀏覽器中有時候需要在響應(yīng)鼠標的click，move，doubleclick等事件的同時，還需要去綜合鼠標所在的位置，去考慮一些問題，首先我們要理解一些概念

事件對象

當(dāng)事件的響應(yīng)函數(shù)被觸發(fā)時，瀏覽器都會將一個事件對象作為實參傳遞給響應(yīng)函數(shù)

在事件對象封裝了當(dāng)前事件的一切信息，比如鼠標坐標，是否被按下，鍵盤是否按下等

比如這就是一個響應(yīng)函數(shù)

xx=document.getElementById(n)
xx.onclick=function(e){
 e=e || window.e; //處理兼容性問題
 consolo.log(e.page.x);
 }

實驗

1
 <style>
 /* * {
 margin: 0;
 padding: 0;
 } */
 
 #box {
 width: 500px;
 height: 500px;
 background: #ddd;
 }
 </style>
<body>
 <div id="box"></div>
 <script>
 xx=document.getElementById('box')
 xx.onclick=function(e) {
 e=e || window.e; //處理兼容性問題
 console.log('e.pageX:', e.pageX);
 console.log('e.clientX:', e.clientX);
 console.log('e.offsetX:', e.offsetX);
 console.log('e.screenX:', e.screenX);
 }
 </script>
</body>

實驗

在谷歌瀏覽器中的結(jié)果，別的瀏覽器沒試

得到以下結(jié)論

在谷歌瀏覽器中，e.clientX和e.pageX鼠標相對于瀏覽器窗口可視區(qū)域的X，Y坐標，可視區(qū)域不包括工具欄和滾動條，IE事件和標準事件支持.e.offsetX是相對于文檔的定位，文檔的左上角為(0,0)，向右為正，向下為正。e.screenX , e.screenY是鼠標相對于屏幕的坐標，包括瀏覽器上面的工具欄和滾動

建民翻譯

您是否曾經(jīng)訪問過一個網(wǎng)站并被其驚人的功能所震撼？其中之一可能是一個很酷的鼠標光標，它不同于您習(xí)慣的常規(guī)箭頭或指針光標。

這確實可以改善用戶體驗，最近我一直想知道它是如何工作的。所以我開始做一些研究，我發(fā)現(xiàn)它是如何完成的。

在本文中，我將解釋如何制作自定義鼠標光標。在本文結(jié)束時，您將學(xué)習(xí)如何使用CSS和JavaScript兩種不同的方法制作這些光標。然后，您將準備好使用不同的創(chuàng)意光標來充實您的網(wǎng)站，以保持您的觀眾的參與度。

如何使用CSS自定義鼠標光標

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

在我們進入一個實際的例子之前，讓我們看一下與CSS cursor屬性相關(guān)的值。雖然大多數(shù)開發(fā)人員只使用了一些重要的，但我們應(yīng)該看看更多。

從上圖中，您可以看到每個CSS cursor屬性值名稱和對應(yīng)的值的說明。

現(xiàn)在如何使用CSS自定義鼠標光標？要使用它，您只需告訴CSS您打算使用什么圖像，并使用該url值將光標屬性指向圖像URL。

從上面的代碼片段中，你可以看到我在文檔正文上設(shè)置了這個，所以無論光標移動到哪里，它都可以應(yīng)用于光標。它具有指定的圖像url()。

該屬性的下一個值是備用，以防圖像未加載或可能由于某些內(nèi)部故障而無法找到。我確定您不希望您的網(wǎng)站“無光標”，因此添加后備非常重要。您還可以添加盡可能多的后備URL。

您還可以在網(wǎng)頁的特定元素或部分上自定義光標。下面是一個 CodePen 示例：

這就是在CSS中自定義光標的全部內(nèi)容。現(xiàn)在讓我們看看如何用 JavaScript 做到這一點。

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

要使用JavaScript實現(xiàn)這一點，您需要操作DOM以獲得所需的結(jié)果。

首先，讓我們看一下 HTML：

從上面的代碼片段中，我創(chuàng)建了兩個div來表示光標。計劃是從JavaScript操作這些 div，以便它們在網(wǎng)頁上的移動由 JavaScriptmousemove事件使用鼠標移動的 X 和 Y 坐標滾動。

現(xiàn)在讓我們來看看 CSS 部分，這將是一件有意義的事情。

如何使用CSS設(shè)置自定義光標的樣式

看看上面的CSS代碼，我禁用了光標（還記得cursor:none嗎？）。這將使光標不可見，只允許我們的自定義光標顯示。

我設(shè)計的divs樣式賦予它們獨特的“類似光標”的外觀。你絕對可以用它做更多的事情，如果有圖像，可以添加背景圖像、表情符號、貼紙等?，F(xiàn)在，讓我們看一下JavaScript

如何使用 JavaScript 使光標移動

我在全局窗口對象上添加了一個事件監(jiān)聽器來監(jiān)聽任何鼠標移動。當(dāng)鼠標移動時，moveCursor函數(shù)表達式被調(diào)用并接收事件對象作為參數(shù)。使用此參數(shù)，我能夠在頁面上的任何位置獲取鼠標上的 X 和 Y 坐標。

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

您看到的反引號稱為模板文字。這可以輕松編寫變量以將它們附加到字符串。另一種方法是將變量連接到字符串。

哪種方法效果最好？

現(xiàn)在由您作為開發(fā)人員來選擇最適合您的方法。如果您想使用一些漂亮的表情符號或圖像作為光標，您可以選擇使用CSS。另一方面，您可能想要使用JavaScript，這樣您就可以自定義您選擇的復(fù)雜形狀并為光標的移動設(shè)置動畫。

無論哪種方式都很好，只要您獲得所需的結(jié)果并讓您網(wǎng)站的所有訪問者驚嘆。

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

在線咨詢

上一篇：如何給網(wǎng)頁設(shè)定各種各樣的樣式？
下一篇：html開發(fā)筆記22-表單元素「用戶名、密碼、單選框

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。