返回

鼠标移到图片上添加图标，获取图标的坐标值

前端

如何使用 JavaScript 在鼠标点击或悬停时向图片添加图标并获取坐标

准备工作

为实现本教程，我们首先需要准备一张图片和一个图标。你可以选择自己喜欢的，或者直接使用本文提供的素材。请将图片和图标放置在同一文件夹中，并确保在 HTML 代码中正确引用。

<img src="image.jpg" alt="图片">
<img src="icon.png" alt="图标">

添加 JavaScript 代码

接下来，我们需要编写 JavaScript 代码，来实现鼠标点击或悬停时添加图标并获取坐标值的功能。可以将代码放在单独的 .js 文件中，也可以直接写在 HTML 代码中。

// 获取图片元素
var image = document.querySelector('img[src="image.jpg"]');

// 获取图标元素
var icon = document.querySelector('img[src="icon.png"]');

// 设置图标样式
icon.style.position = 'absolute';
icon.style.left = '0';
icon.style.top = '0';

// 添加鼠标点击事件监听器
image.addEventListener('click', function(e) {
  // 计算鼠标点击处的坐标值
  var x = e.clientX - image.getBoundingClientRect().left;
  var y = e.clientY - image.getBoundingClientRect().top;

  // 计算图标的 left 和 top 值
  icon.style.left = x - icon.offsetWidth / 2 + 'px';
  icon.style.top = y - icon.offsetHeight / 2 + 'px';

  // 显示图标
  icon.style.display = 'block';
});

// 添加鼠标悬停事件监听器
image.addEventListener('mouseover', function() {
  // 显示图标
  icon.style.display = 'block';
});

// 添加鼠标离开事件监听器
image.addEventListener('mouseleave', function() {
  // 隐藏图标
  icon.style.display = 'none';
});

效果演示

运行以上代码，你会发现当鼠标点击或悬停在图片上时，图标会出现在鼠标点击或悬停的位置。可以根据需要调整图标的样式和位置，达到你想要的效果。

结语

本教程介绍了如何在鼠标点击或悬停时使用 JavaScript 向图片添加图标并获取坐标值。我们还学习了如何计算图标的 left 和 top 值，以及如何调整图标的中心位置。希望本教程对你有所帮助。

常见问题解答

  1. 如何更改图标的样式？

    只需在 JavaScript 代码中修改 icon.style 对象即可。例如，要更改图标的大小，可以使用 icon.style.width 和 icon.style.height 属性。

  2. 如何让图标始终位于鼠标指针下？

    在 mousemove 事件监听器中添加以下代码：

    image.addEventListener('mousemove', function(e) {
  // 计算鼠标点击处的坐标值
  var x = e.clientX - image.getBoundingClientRect().left;
  var y = e.clientY - image.getBoundingClientRect().top;

  // 计算图标的 left 和 top 值
  icon.style.left = x - icon.offsetWidth / 2 + 'px';
  icon.style.top = y - icon.offsetHeight / 2 + 'px';
});

  3. 如何隐藏图标，直到鼠标悬停或点击？

    在 JavaScript 代码中，将 icon.style.display 属性初始值设置为 none 即可：

    icon.style.display = 'none';

  4. 如何获取鼠标点击或悬停时的确切坐标值？

    使用 e.clientX 和 e.clientY 事件属性即可获取鼠标点击或悬停时的 x 和 y 坐标值。

  5. 为什么我的图标不显示？

    确保已正确引用图片和图标，并且 JavaScript 代码已正确编写。另外，检查图片和图标是否具有相同的文件夹路径。