js利用鼠标来控制图片的放大和缩小代码

以下是利用JavaScript实现鼠标控制图片放大和缩小的示例代码：

<!-- HTML结构 -->
<div>
  <img id="img" src="image.jpg" alt="image">
</div>

/* CSS样式 */
div {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
}

// JavaScript代码
const img = document.getElementById('img');
let scale = 1;

// 鼠标滚轮事件
document.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面滚动
  let delta = Math.sign(e.deltaY); // 获取鼠标滚轮滚动方向
  scale += delta * 0.1; // 改变缩放比例
  scale = Math.max(0.1, Math.min(3, scale)); // 缩放比例限制在0.1~3之间
  img.style.transform = `scale(${scale})`; // 应用缩放效果
});

// 鼠标拖拽事件
let isDragging = false;
let startX, startY;
let translateX = 0, translateY = 0;

img.addEventListener('mousedown', (e) => {
  e.preventDefault();
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
  e.preventDefault();
  if (isDragging) {
    let deltaX = e.clientX - startX;
    let deltaY = e.clientY - startY;
    translateX += deltaX;
    translateY += deltaY;
    img.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
    startX = e.clientX;
    startY = e.clientY;
  }
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

代码解释：

1. HTML结构中包含一个容器div和一个图片img，容器设置为固定大小并隐藏超出部分，图片设置为100%宽高并添加过渡效果。
2. CSS样式中设置了容器的样式和图片的样式，并且为img添加了过渡效果。
3. JavaScript代码中定义了一个img元素和一个缩放比例scale，默认为1。
4. 监听鼠标滚轮事件，获取滚动方向，改变缩放比例，限制在0.1~3之间，然后应用缩放效果。
5. 监听鼠标拖拽事件，获取鼠标拖拽距离，根据鼠标拖拽距离改变图片的translateX和translateY属性值，应用缩放和平移效果。
6. 代码中使用了ES6的语法，如模板字符串和箭头函数。