html + js实现鼠标滑过局部放大效果

可以使用CSS的`transform`属性和JavaScript的`mouseover`和`mouseout`事件来实现鼠标滑过局部放大效果。以下是一个简单的示例：

HTML代码：

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

CSS代码：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
}

img:hover {
  transform: scale(1.2);
}

JavaScript代码：

const container = document.querySelector('.container');
const img = document.querySelector('img');

container.addEventListener('mousemove', e => {
  const containerRect = container.getBoundingClientRect();
  const x = e.clientX - containerRect.left;
  const y = e.clientY - containerRect.top;
  const centerX = containerRect.width / 2;
  const centerY = containerRect.height / 2;
  const deltaX = (centerX - x) / centerX;
  const deltaY = (centerY - y) / centerY;
  img.style.transform = `translateX(${deltaX * 10}%) translateY(${deltaY * 10}%) scale(1.2)`;
});

container.addEventListener('mouseleave', () => {
  img.style.transform = 'translateX(0%) translateY(0%) scale(1)';
});

解释一下这段代码的实现思路：

首先，我们将图片放在一个容器里，并将容器的`overflow`属性设为`hidden`，这样就可以控制图片的显示范围。然后，我们设置图片的`position`为`absolute`，并将它的宽度和高度设置为100%以填满容器。接着，我们给图片设置一个`transition`属性，这样在鼠标滑过时就会有一个平滑的过渡效果。

在CSS中，我们使用`:hover`伪类来指定当鼠标滑过时要应用的样式。在这里，我们将`transform`属性设为`scale(1.2)`，这样图片就会被放大1.2倍。

在JavaScript中，我们首先获取容器和图片的元素，然后为容器添加`mousemove`和`mouseleave`事件。当鼠标在容器内移动时，我们计算出鼠标在容器内的位置，以及鼠标与容器中心的距离。然后，我们根据这些信息计算出图片应该被平移多少，并将这个值应用到图片的`transform`属性中。最后，当鼠标离开容器时，我们将图片的`transform`属性重置为原始值，这样图片就会恢复到原来的大小和位置。