Comment utiliser JavaScript pour faire glisser des images de haut en bas et ajouter des effets de zoom tout en les limitant au conteneur ?

JavaScript Comment faire glisser l'image de haut en bas et ajouter un effet de zoom tout en la limitant au conteneur ?

Dans la conception Web moderne, il est souvent nécessaire d'effectuer des opérations interactives et d'améliorer les effets sur les images. Parmi eux, les effets de glissement et de zoom des images vers le haut et vers le bas sont des exigences courantes. Cet article expliquera comment utiliser JavaScript pour obtenir ces effets et le limiter au sein du conteneur.

1. Implémentation de l'effet de glissement haut et bas

La réalisation de l'effet de glissement haut et bas des images repose principalement sur des événements de souris ou tactiles, et nécessite de contrôler la position de l'image.

Tout d'abord, dans la partie HTML, nous créons un conteneur et un élément image :

<div id="container">
  <img id="image" src="img.jpg">
</div>

Ensuite, en JavaScript, nous devons ajouter un écouteur d'événement à l'élément image et déplacer l'image en fonction du changement de position de la souris ou touch event Position :

var container = document.getElementById('container');
var image = document.getElementById('image');

var startY; // 记录初始位置

image.onmousedown = start;
image.addEventListener('touchstart', start, false);

function start(e) {
  e.preventDefault();
  
  if (e.touches) {
    startY = e.touches[0].clientY;
    document.addEventListener('touchmove', move, false);
    document.addEventListener('touchend', end, false);
  } else {
    startY = e.clientY;
    document.onmousemove = move;
    document.onmouseup = end;
  }
}

function move(e) {
  var currentY = e.touches ? e.touches[0].clientY : e.clientY;
  var diffY = currentY - startY;
  
  image.style.top = image.offsetTop + diffY + 'px';
}

function end() {
  document.removeEventListener('touchmove', move, false);
  document.removeEventListener('touchend', end, false);
  document.onmousemove = null;
  document.onmouseup = null;
}

Grâce au code ci-dessus, lorsque l'utilisateur appuie sur la souris ou touche l'écran, la position initiale sera enregistrée et, à mesure que la souris ou le doigt bouge, la position de l'image changera également. A la fin de l'opération, supprimez l'écouteur d'événement.

2. Mise en œuvre de l'effet zoom

La réalisation de l'effet zoom de l'image est basée sur le jugement de la position et du geste de la souris ou d'un événement tactile. Voici un exemple d'utilisation de gestes pour déterminer le zoom :

var scalingFactor = 1.0; // 初始化缩放比例
var gestureStartDistance; // 记录初始手势距离

image.addEventListener('gesturestart', start, false);
image.addEventListener('gesturechange', change, false);
image.addEventListener('gestureend', end, false);

function start(e) {
  e.preventDefault();
  gestureStartDistance = getGestureDistance(e);
}

function change(e) {
  var currentDistance = getGestureDistance(e);
  scalingFactor = currentDistance / gestureStartDistance;
  
  image.style.transform = 'scale(' + scalingFactor + ')';
}

function end() {
  gestureStartDistance = null;
}

function getGestureDistance(e) {
  var x1 = e.touches[0].pageX;
  var y1 = e.touches[0].pageY;
  var x2 = e.touches[1].pageX;
  var y2 = e.touches[1].pageY;
  
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

Dans le code ci-dessus, lorsque le doigt commence à toucher l'écran, la distance gestuelle initiale est enregistrée. Lorsque le doigt bouge, le taux de zoom est défini en calculant le rapport entre la distance gestuelle actuelle et la distance gestuelle initiale et appliqué à l'image.

3. Limité au conteneur

Afin de garantir que l'image glisse et évolue à l'intérieur du conteneur et ne déborde pas du conteneur, nous devons faire certains jugements de position et de taille.

Tout d'abord, dans la partie CSS, définissez la largeur et la hauteur du conteneur, et ajoutez des styles au conteneur overflow: hidden; pour masquer le contenu du débordement :

#container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

Ensuite, en JavaScript, nous devons déterminer la position et la position de l'image pendant le glissement et le zoom. Si la taille dépasse la limite du conteneur et ajustez-la :

function move(e) {
  var currentY = e.touches ? e.touches[0].clientY : e.clientY;
  var diffY = currentY - startY;
  
  var minTop = container.clientHeight - image.height; // 图片最小可到达的top值
  var maxTop = 0; // 图片最大可到达的top值
  
  var newTop = image.offsetTop + diffY;
  newTop = Math.max(minTop, Math.min(maxTop, newTop));
  
  image.style.top = newTop + 'px';
}

function change(e) {
  var currentDistance = getGestureDistance(e);
  scalingFactor = currentDistance / gestureStartDistance;
  
  var newWidth = image.width * scalingFactor;
  var newHeight = image.height * scalingFactor;
  
  var minWidth = container.clientWidth;
  var minHeight = container.clientHeight;
  
  var maxWidth = image.width;
  var maxHeight = image.height;
  
  newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
  newHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
  
  image.style.width = newWidth + 'px';
  image.style.height = newHeight + 'px';
}

Grâce au code ci-dessus, nous calculerons la valeur supérieure et la taille minimale et maximale en fonction de la taille du conteneur et de la taille de l'image. , et pendant le processus de glissement et de mise à l'échelle, jugez et ajustez.

En résumé, le glissement de haut en bas de l'image et l'ajout d'effets de zoom sont implémentés via JavaScript, et sont limités au conteneur. L'effet de glissement est obtenu grâce à la surveillance des événements de souris ou de toucher et au calcul de la position. Grâce au suivi des événements gestuels et au calcul de la distance, l'effet zoom est obtenu. En jugeant la position et la taille, l'effet de limitation au conteneur est obtenu.

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!