在本文中，我們將看到如何將標(biāo)準(zhǔn)鼠標(biāo)指針轉(zhuǎn)換為當(dāng)我們單擊時(shí)會(huì)改變樣式的精美表情符號(hào)。
讓我們開始編碼！
我們將要建造的
首先創(chuàng)建這三個(gè)文件；index.html、 styles.css 和script.js
HTML 結(jié)構(gòu)
首先創(chuàng)建標(biāo)準(zhǔn)的 HTML 樣板代碼。
<!DOCTYPE html>
<html>
<head>
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
然后，在<link>我們的 HTML 文件的標(biāo)簽中，我們導(dǎo)入styles.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
通過將HTML 文件底部src的標(biāo)記設(shè)置為我們的文件來導(dǎo)入 JavaScript文件。<script>script.js
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
最后，用 class 創(chuàng)建一個(gè) div pointer。該元素將用于代替默認(rèn)光標(biāo)。而且由于它是一個(gè) html 元素，我們可以對(duì)其應(yīng)用多種樣式
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body>
<div class="pointer"></div>
<script src="script.js"></script>
</body>
</html>
這就是 HTML 文件的全部內(nèi)容！index.html當(dāng)您在瀏覽器中打開文件時(shí)，您應(yīng)該會(huì)看到一個(gè)空白頁面。
樣式化我們的 HTML
首先，我們將網(wǎng)頁的背景設(shè)置為淺紫色。
body {
background: #8499ff;
}
我們將網(wǎng)頁的高度和寬度設(shè)置為正在查看頁面的設(shè)備的最大高度和寬度。
body {
...
height: 100vh;
width: 100vw;
}
然后，通過將overflow屬性設(shè)置為none，我們可以防止垂直和水平滾動(dòng)。
body {
...
overflow: hidden;
}
最后，我們隱藏指針。
body {
...
cursor: none;
}
你應(yīng)該有這個(gè)body：
body {
background: #8499ff;
height: 100vh;
width: 100vw;
overflow: hidden;
cursor: none;
}
我們現(xiàn)在要對(duì)pointer. 我們不會(huì)直接設(shè)置指針的樣式，而是使用::after偽類。
::after偽類選擇選定元素之后的內(nèi)容——允許您在特定標(biāo)簽之后插入文本，這就是我們將在本教程中所做的。
.pointer::after {
content: "??";
font-size: 40px;
}
我們將content上面代碼中的屬性設(shè)置為表情符號(hào)（??）。這個(gè)表情符號(hào)將是我們的默認(rèn)光標(biāo)圖標(biāo)。然后增加尺寸40px以使其更大一點(diǎn)。
每次單擊鼠標(biāo)時(shí)，我們都會(huì)將默認(rèn)表情符號(hào)更改為 (??)。創(chuàng)建類pointer-clicked類來完成此操作。此類將把此類分配給 JavaScript 中的指針。
.pointer-clicked::after {
content: '??';
}
使用 JavaScript 添加功能
document.querySelector()首先用方法選擇我們在HTML中創(chuàng)建的指針
const pointer = document.querySelector(".pointer");
我們必須監(jiān)聽這兩個(gè)鼠標(biāo)事件：
mousemove : 當(dāng)鼠標(biāo)指針移動(dòng)時(shí)
mousedown : 當(dāng)鼠標(biāo)指針被點(diǎn)擊/按下時(shí)
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
讓我們?yōu)檫@些事件監(jiān)聽器創(chuàng)建回調(diào)函數(shù)。
const onPointerMove = (e) => {
// on pointer move
}
const onMouseClick = () => {
// on mouse click
}
當(dāng)實(shí)際指針移動(dòng)時(shí)，我們想要獲取它的位置并將其傳遞給我們在 HTML 中創(chuàng)建的指針元素。
const onPointerMove = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
返回指針相對(duì)于視口的clientY垂直坐標(biāo)。clientX另一方面，該屬性返回水平坐標(biāo)。
在該pointer.style.transform行中，我們通過為其分配實(shí)際光標(biāo)的坐標(biāo)來更改自定義指針的位置。明智之舉！??
當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，我們添加了一個(gè)名為pointer-clicked. 然后在函數(shù)中 150 毫秒后刪除這個(gè)新創(chuàng)建的類setTimeout，將指針解析為其默認(rèn)狀態(tài)。
const onMouseClick = () => {
pointer.classList.add('pointer-clicked')
setTimeout(() => {
pointer.classList.remove('pointer-clicked')
}, 150)
}
在所有內(nèi)容的最后，script.js文件應(yīng)該有這個(gè)：
const pointer = document.querySelector('.pointer');
const onPointerMove = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
const onMouseClick = () => {
pointer.classList.add('pointer-clicked')
setTimeout(() => {
pointer.classList.remove('pointer-clicked')
}, 150)
}
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
現(xiàn)在index.html在你的瀏覽器中打開，你應(yīng)該會(huì)看到這個(gè)！
代碼在GitHub上可用
結(jié)論
這就是本文的內(nèi)容。
文章來源：https://langfordk.hashnode.dev/how-to-create-a-custom-mouse-pointer-in-html-css-and-javascript
