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

要实现同时实现图片的拖拽和鼠标位置放大缩小，可以参考以下步骤：

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

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

3. 使用 JavaScript 监听鼠标按下事件，当鼠标按下时，记录下鼠标的位置和容器的位置。

4. 使用 JavaScript 监听鼠标移动事件，当鼠标移动时，根据鼠标的位置和容器的位置计算出容器应该移动的距离，并将容器移动到新的位置。

5. 当鼠标离开容器时，停止拖拽。

6. 使用 JavaScript 监听鼠标滚轮事件，根据滚轮的方向计算出图片应该放大或缩小的比例，并将图片缩放到新的大小。

下面是一个示例代码：

HTML代码：

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

CSS样式：

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

.container img {
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0;
  top: 0;
}

.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;
var isDragging = false;
var startX = 0;
var startY = 0;
var containerLeft = 0;
var containerTop = 0;

container.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  containerLeft = container.offsetLeft;
  containerTop = container.offsetTop;
});

container.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  var deltaX = e.clientX - startX;
  var deltaY = e.clientY - startY;
  container.style.left = containerLeft + deltaX + 'px';
  container.style.top = containerTop + deltaY + 'px';
});

container.addEventListener('mouseup', function() {
  isDragging = false;
});

container.addEventListener('mouseleave', function() {
  isDragging = false;
});

container.addEventListener('wheel', function(e) {
  e.preventDefault();
  var delta = e.deltaY < 0 ? 0.1 : -0.1;
  var scaleX = img.offsetWidth / containerWidth + delta;
  var scaleY = img.offsetHeight / containerHeight + delta;
  img.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
});

注意：这个示例只是一个简单的实现，实际应用中可能需要处理更多的细节问题，比如边界处理、拖拽的范围限制等。