html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放

这篇文章距离上次修改已过188天，其中的内容可能已经有所变动。

以下是一个简单的HTML、CSS和JavaScript代码示例，实现了图片的放大功能，包括拖拽和滚轮控制的缩放。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<style>
  #imageContainer {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    cursor: move;
    border: 1px solid #000;
  }
  img {
    position: absolute;
    width: 100%;
    height: auto;
    transform-origin: top left;
    transition: transform 0.1s;
  }
</style>
</head>
<body>
<div id="imageContainer">
  <img id="zoomableImage" src="path_to_your_image.jpg" alt="Zoomable Image">
</div>
 
<script>
  const container = document.getElementById('imageContainer');
  const img = document.getElementById('zoomableImage');
  let startX, startY, x, y;
 
  container.addEventListener('mousedown', function(e) {
    startX = e.pageX - x;
    startY = e.pageY - y;
    container.style.cursor = 'grabbing';
    document.addEventListener('mousemove', moveImage);
    document.addEventListener('mouseup', stopMoving);
  });
 
  function moveImage(e) {
    x = e.pageX - startX;
    y = e.pageY - startY;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }
 
  function stopMoving() {
    container.style.cursor = 'move';
    document.removeEventListener('mousemove', moveImage);
    document.removeEventListener('mouseup', stopMoving);
  }
 
  container.addEventListener('wheel', function(e) {
    e.preventDefault();
    const scale = img.getBoundingClientRect().width / container.offsetWidth;
    const scaleFactor = e.deltaY > 0 ? 1.1 : 0.9;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale * scaleFactor + ')';
  });
</script>
</body>
</html>

在这个示例中，图片可以通过鼠标拖拽来移动，并且可以通过滚轮的滚动（向上为放大，向下为缩小）来缩放。你需要替换path_to_your_image.jpg为你的图片路径。这个示例提供了基本的放大缩小功能，没有包括边界检查或任何性能优化。

html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放

评论已关闭

推荐阅读