Comment implémenter le glisser-zoomer des images en JavaScript tout en étant limité au conteneur et en conservant les proportions et l'affichage centré ?-js tutoriel-php.cn

Comment implémenter le glisser-zoomer des images en JavaScript tout en étant limité au conteneur et en conservant les proportions et l'affichage centré ?

WBOY

Libérer： 2023-10-20 13:34:03

original

1387 Les gens l'ont consulté

JavaScript 如何实现图片的拖动缩放同时限制在容器内且保持纵横比和居中显示？

JavaScript Comment faire glisser et zoomer des images en se limitant au conteneur et en conservant le rapport hauteur/largeur et l'affichage centré ?

Dans le développement Web moderne, faire glisser, mettre à l'échelle et limiter les images dans des conteneurs est une exigence très courante. Aujourd'hui, nous allons apprendre à utiliser JavaScript pour implémenter cette fonction tout en conservant les proportions et l'affichage centré de l'image.

Tout d'abord, nous avons besoin d'une page HTML pour afficher les images et les conteneurs. Assurez-vous d'inclure un élément HTML pour afficher l'image et un élément conteneur dans le document HTML. Comme indiqué ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片拖动缩放</title>
  <style>
    /* 定义容器的样式 */
    .container {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }

    /* 定义图片的样式 */
    .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="image" src="image.jpg" alt="图片">
  </div>

  <script>
    // 在这里编写 JavaScript 代码
  </script>
</body>
</html>

Copier après la connexion

Ensuite, nous utiliserons JavaScript pour implémenter les fonctions de glisser et de zoom de l'image. Tout d’abord, nous devons obtenir l’élément image et l’élément conteneur et ajouter des écouteurs d’événements.

// 获取图片元素和容器元素
const image = document.querySelector('.image');
const container = document.querySelector('.container');

// 定义一些变量
let isDragging = false;
let prevX = 0;
let prevY = 0;
let scale = 1;

// 添加鼠标按下事件监听器
image.addEventListener('mousedown', e => {
  isDragging = true;
  prevX = e.clientX;
  prevY = e.clientY;
});

// 添加鼠标移动事件监听器
image.addEventListener('mousemove', e => {
  if (!isDragging) return;

  const deltaX = e.clientX - prevX;
  const deltaY = e.clientY - prevY;

  // 计算新的位置
  const newX = image.offsetLeft + deltaX;
  const newY = image.offsetTop + deltaY;

  // 将图片限制在容器内
  const maxX = container.clientWidth - image.clientWidth;
  const maxY = container.clientHeight - image.clientHeight;
  const clampedX = Math.max(0, Math.min(newX, maxX));
  const clampedY = Math.max(0, Math.min(newY, maxY));

  // 更新图片的位置
  image.style.left = clampedX + 'px';
  image.style.top = clampedY + 'px';

  prevX = e.clientX;
  prevY = e.clientY;
});

// 添加鼠标松开事件监听器
image.addEventListener('mouseup', () => {
  isDragging = false;
});

// 添加鼠标滚动事件监听器
container.addEventListener('wheel', e => {
  e.preventDefault();

  // 通过滚动的 deltaY 值来计算缩放比例
  const deltaScale = 1 - e.deltaY * 0.01;

  // 限制缩放比例的范围
  scale = Math.max(0.1, Math.min(scale * deltaScale, 10));

  // 更新图片的缩放
  image.style.transform = `scale(${scale})`;
});

Copier après la connexion

La fonction de ce code JavaScript est d'enregistrer la position actuelle de la souris lorsque la souris est enfoncée. Ensuite, lorsque la souris bouge, le changement de position de la souris est calculé et la position de l'image est mise à jour en fonction de la valeur de changement. Ensuite, lorsque la souris est relâchée, arrêtez de glisser. Enfin, lorsque la souris défile, la mise à l'échelle est calculée en fonction de la valeur deltaY défilée et la mise à l'échelle de l'image est mise à jour.

De cette façon, les fonctions de glisser, de mise à l'échelle et de limitation des images dans le conteneur sont réalisées. Dans le même temps, l’image conserve également ses proportions et est centrée.

J'espère que cet article vous aidera à comprendre comment utiliser JavaScript pour faire glisser, zoomer et limiter des images dans un conteneur. Si vous avez des questions, n'hésitez pas à les poser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!