js实现图片鼠标位置位置放大缩小

要实现鼠标悬停在图片上时放大图片的效果，可以使用以下步骤：

1. 在 HTML 中插入一张图片，设置图片的宽度和高度，并将其放置在一个容器中。

2. 使用 CSS 设置容器的样式，将容器的宽度和高度设置为图片的一半，并将 overflow 属性设置为 hidden，这样当图片放大时，容器可以隐藏超出容器范围的部分。

3. 使用 JavaScript 监听鼠标移动事件，并获取鼠标的位置。

4. 根据鼠标的位置计算出图片应该放大的比例，可以使用以下公式：放大比例 = (鼠标距离容器左边缘的距离 / 容器宽度) * 2。

5. 使用 CSS 设置图片的样式，将图片的宽度和高度分别乘以放大比例，使图片放大。

6. 当鼠标离开图片时，将图片恢复原始大小。

下面是一个示例代码：

HTML代码：

<div class="container">
  <img src="image.jpg" width="400" height="300" />
</div>

CSS样式：

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.container img {
  transition: all 0.3s ease-out;
}

.container:hover img {
  transform: scale(2);
}

JavaScript代码：

var container = document.querySelector('.container');
var img = container.querySelector('img');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

container.addEventListener('mousemove', function(e) {
  var mouseX = e.clientX - this.offsetLeft;
  var mouseY = e.clientY - this.offsetTop;
  var scaleX = mouseX / containerWidth * 2;
  var scaleY = mouseY / containerHeight * 2;

  img.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
});

container.addEventListener('mouseleave', function() {
  img.style.transform = 'scale(1)';
});

注意：这个示例只是一个简单的实现，实际应用中可能需要处理更多的细节问题，比如图片的边界处理、动画效果等。