javascript实现鼠标悬浮改变图片位置

可以使用JavaScript来实现鼠标悬浮改变图片位置的效果，具体实现步骤如下：

1. 获取需要操作的图片元素和容器元素。
2. 添加鼠标悬浮事件监听器，当鼠标悬浮在容器元素上时，获取鼠标在容器内的位置。
3. 计算图片应该移动的距离，并设置图片的样式`transform: translate(x, y)`来实现移动效果。

以下是示例代码：

<style>
  .container {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #333;
    overflow: hidden;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease-out;
  }
</style>

<div class="container" onmousemove="moveImage(event)">
  <img src="example.jpg" alt="example" />
</div>

<script>
  const container = document.querySelector('.container');
  const image = document.querySelector('img');

  function moveImage(event) {
    const containerRect = container.getBoundingClientRect();
    const mouseX = event.clientX - containerRect.left;
    const mouseY = event.clientY - containerRect.top;
    const centerX = containerRect.width / 2;
    const centerY = containerRect.height / 2;
    const moveX = (mouseX - centerX) / 10;
    const moveY = (mouseY - centerY) / 10;
    image.style.transform = `translate(${moveX}px, ${moveY}px)`;
  }
</script>

该示例代码中，将图片放在一个容器中，容器的宽高和边框用于限制图片移动的范围。当鼠标在容器内移动时，计算鼠标相对于容器中心的偏移量，使用该偏移量计算图片应该移动的距离，并使用`transform`样式来实现图片移动效果。