javascript文字跟随鼠标移动怎么实现
扬州沐宇科技
2023-10-23 09:21:15
JavaScript
要实现文字跟随鼠标移动的效果，可以通过以下步骤来实现：
- 创建一个div元素，用于容纳文字。
- 监听鼠标移动事件，获取鼠标当前的位置。
- 将文字的位置设置为鼠标的位置。
- 使用CSS样式来控制文字的样式和位置。
以下是一个示例代码：
HTML：
<div id="follow">Follow me</div>
CSS：
#follow {
position: absolute;
top: 0;
left: 0;
font-size: 20px;
}
JavaScript：
var follow = document.getElementById('follow');
window.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
follow.style.left = x + 'px';
follow.style.top = y + 'px';
});
在上述代码中，我们首先通过getElementById方法获取到follow这个div元素，然后使用addEventListener方法来监听mousemove事件。当鼠标移动时，会触发事件回调函数，我们在回调函数中获取鼠标的当前位置，并将文字的位置设置为鼠标的位置。
相关问答
