JavaScript中鼠标光标周围的图像叠加

Question

我想在 HTML/JavaScript 中实现以下功能，但不知道从哪里开始，或者即使一个工具包中已经有一个用于此的功能：

我有一个可见的图像（例如 png）和另一个不可见的相同大小的图像。但是，如果我将鼠标指针移到第一张图像上，则第二张图像的相应部分将显示在鼠标光标周围。因此，例如，如果我将鼠标移动到第一个图像上的 100,100 位置，则第二个图像的 50,50 到 150,150 的部分应该覆盖在第一个图像的 50,50 到 150,150 位置。我希望这是可以理解的。

有谁知道，是否已经有一个包含此功能的库？我已经在互联网上搜索过这个，但什么也没找到。但是，我真的不知道要搜索什么关键字。因此，如果有人知道要搜索的关键字，我也将不胜感激。

或者，您能否给我一个提示，我如何 grep 第二张图像的一部分并将其显示在鼠标位置？我在想画布可能会被使用，但我不确定如何使用。

非常感谢和最好的问候

托比亚斯

Answer 1

这可以通过 Vanilla JS 或 JQuery 完成。它背后的基本思想是将图像包装在带有position:relative 的容器中，并在其上监听鼠标移动。带有position:absolute 的第二个<div> 将接收鼠标指针的坐标，其背景位置设置为与当前鼠标偏移量相匹配。

发布的代码只是为了让您了解它的外观，需要对其进行扩展以正确处理图像的边缘。

$(".hover-container").on("mousemove", function (e) {
  var parentOffset = $(this).parent().offset();
  //or $(this).offset(); if you really just want the current element's offset
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var picHeight = $('.hover-image').height();
  var picWidth = $('.hover-image').height();
  $('.hover-image')
    .css("left", relX - 50 + "px")
    .css("top", relY - 50 + "px")
    .css("background-position", (picWidth-relX-50) + "px " 
         + (picHeight-relY-50) + "px")
});

.hover-container {
  position: relative;
}

.hover-image {
  position: absolute;
  width: 100px;
  height: 100px;
  background: url(https://i.imgur.com/Hp5pUVA.jpg);
  background-position: 0 0;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="hover-container">
  <img class="hover-over" src="https://i.imgur.com/j0yhQez.jpg"/>
  <div class="hover-image"></div>
</div>