在本文中，我们将看到如何将标准鼠标指针转换为当我们单击时会改变样式的精美表情符号。
让我们开始编码！
我们将要建造的
首先创建这三个文件；index.html、 styles.css 和script.js
HTML 结构
首先创建标准的 HTML 样板代码。
<!DOCTYPE html>
<html>
<head>
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
然后，在<link>我们的 HTML 文件的标签中，我们导入styles.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>Custom Mouse Pointer</title>
</head>
<body></body>
</html>
通过将HTML 文件底部src的标记设置为我们的文件来导入 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 创建一个 div pointer。该元素将用于代替默认光标。而且由于它是一个 html 元素，我们可以对其应用多种样式
<!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 文件的全部内容！index.html当您在浏览器中打开文件时，您应该会看到一个空白页面。
样式化我们的 HTML
首先，我们将网页的背景设置为浅紫色。
body {
background: #8499ff;
}
我们将网页的高度和宽度设置为正在查看页面的设备的最大高度和宽度。
body {
...
height: 100vh;
width: 100vw;
}
然后，通过将overflow属性设置为none，我们可以防止垂直和水平滚动。
body {
...
overflow: hidden;
}
最后，我们隐藏指针。
body {
...
cursor: none;
}
你应该有这个body：
body {
background: #8499ff;
height: 100vh;
width: 100vw;
overflow: hidden;
cursor: none;
}
我们现在要对pointer. 我们不会直接设置指针的样式，而是使用::after伪类。
::after伪类选择选定元素之后的内容——允许您在特定标签之后插入文本，这就是我们将在本教程中所做的。
.pointer::after {
content: "🤩";
font-size: 40px;
}
我们将content上面代码中的属性设置为表情符号（🤩）。这个表情符号将是我们的默认光标图标。然后增加尺寸40px以使其更大一点。
每次单击鼠标时，我们都会将默认表情符号更改为 (😜)。创建类pointer-clicked类来完成此操作。此类将把此类分配给 JavaScript 中的指针。
.pointer-clicked::after {
content: '😜';
}
使用 JavaScript 添加功能
document.querySelector()首先用方法选择我们在HTML中创建的指针
const pointer = document.querySelector(".pointer");
我们必须监听这两个鼠标事件：
mousemove : 当鼠标指针移动时
mousedown : 当鼠标指针被点击/按下时
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
让我们为这些事件监听器创建回调函数。
const onPointerMove = (e) => {
// on pointer move
}
const onMouseClick = () => {
// on mouse click
}
当实际指针移动时，我们想要获取它的位置并将其传递给我们在 HTML 中创建的指针元素。
const onPointerMove = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
返回指针相对于视口的clientY垂直坐标。clientX另一方面，该属性返回水平坐标。
在该pointer.style.transform行中，我们通过为其分配实际光标的坐标来更改自定义指针的位置。明智之举！😊
当鼠标点击时，我们添加了一个名为pointer-clicked. 然后在函数中 150 毫秒后删除这个新创建的类setTimeout，将指针解析为其默认状态。
const onMouseClick = () => {
pointer.classList.add('pointer-clicked')
setTimeout(() => {
pointer.classList.remove('pointer-clicked')
}, 150)
}
在所有内容的最后，script.js文件应该有这个：
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);
现在index.html在你的浏览器中打开，你应该会看到这个！
代码在GitHub上可用
结论
这就是本文的内容。
文章来源：https://langfordk.hashnode.dev/how-to-create-a-custom-mouse-pointer-in-html-css-and-javascript
网友评论