html函数如何实现鼠标跟随效果 html函数鼠标移动事件的监听-html教程-PHP中文网

html函数如何实现鼠标跟随效果 html函数鼠标移动事件的监听

蓮花仙者

发布： 2025-10-28 15:10:02

原创

385人浏览过

答案是通过监听mousemove事件并更新元素位置实现鼠标跟随。首先使用addEventListener监听鼠标移动获取坐标，再创建position:fixed的元素，最后在事件中动态设置其left和top值，可选缓动效果通过requestAnimationFrame插值实现。

html函数如何实现鼠标跟随效果 html函数鼠标移动事件的监听

要实现鼠标跟随效果，核心是监听鼠标移动事件，并实时更新页面元素的位置。这可以通过原生 JavaScript 实现，不需要复杂的库或框架。

1. 监听鼠标移动事件

使用 addEventListener 监听 red">mousemove 事件，该事件在鼠标在页面上移动时触发。

基本语法：

document.addEventListener('mousemove', function(e) {
  const x = e.clientX;
  const y = e.clientY;
  // 使用 x 和 y 坐标做后续操作
});

e.clientX 和 e.clientY 提供鼠标相对于浏览器视口的水平和垂直坐标。

立即学习“前端免费学习笔记（深入）”；

2. 创建跟随鼠标的元素

先在 HTML 中创建一个需要跟随鼠标移动的元素：

注意设置 position: fixed，使元素相对于视口定位，不受滚动影响。pointer-events: none 可防止它阻挡鼠标事件。

钛投标

钛投标 | 全年免费 | 不限字数 | AI标书智写工具

157

查看详情

3. 更新元素位置

在 mousemove 事件中，把获取到的鼠标坐标赋给目标元素的位置：

const follower = document.getElementById('follower');

document.addEventListener('mousemove', function(e) {
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
});

这样，元素就会实时跟随鼠标移动。

4. 添加平滑跟随效果（可选）

如果希望元素不是瞬间跳转，而是“缓动”跟随，可以使用定时器和位置插值：

const follower = document.getElementById('follower');
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;

document.addEventListener('mousemove', function(e) {
targetX = e.clientX;
targetY = e.clientY;
});

function animate() {
  currentX += (targetX - currentX) 0.1;
  currentY += (targetY - currentY) 0.1;
  follower.style.left = currentX + 'px';
  follower.style.top = currentY + 'px';
  requestAnimationFrame(animate);
}
animate();

这种方式会让元素“滑动”到鼠标位置，视觉更柔和。

基本上就这些。通过监听 mousemove 事件，结合 DOM 操作更新样式，就能轻松实现鼠标跟随效果。不复杂但容易忽略细节，比如定位方式和事件坐标的理解。

以上就是html函数如何实现鼠标跟随效果 html函数鼠标移动事件的监听的详细内容，更多请关注php中文网其它相关文章！