Comment utiliser JavaScript pour faire glisser l'image vers la gauche et la droite et ajouter un effet de zoom ?

JavaScript Comment faire glisser l'image vers la gauche et la droite et ajouter un effet de zoom ?

Avec le développement d'Internet, les images sont devenues un élément indispensable de notre quotidien. Dans la conception de sites Web, la manière dont les images sont présentées est également très importante. Cet article explique comment utiliser JavaScript pour faire glisser l'image vers la gauche et la droite et ajouter un effet de zoom.

1. Structure HTML

Tout d'abord, nous devons créer un conteneur d'image en HTML et y imbriquer l'élément image. Par exemple :

<div class="slider">
  <img src="image1.jpg" alt="">
</div>

2. Ajouter des styles CSS

Ensuite, nous devons ajouter quelques styles CSS de base au conteneur d'images pour garantir que le conteneur d'images peut s'afficher normalement et avoir une certaine taille. Par exemple :

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. Pour obtenir l'effet de glissement gauche et droit

Tout d'abord, nous devons obtenir le conteneur d'image et les éléments de l'image, et calculer la distance pour chaque glissement. Le code est le suivant :

var slider = document.querySelector('.slider');
var image = document.querySelector('.slider img');
var slideDistance = 200; // 每次滑动的距离

Ensuite, nous pouvons lier un événement de glissement au conteneur d'image et ajuster la position de l'affichage de l'image en fonction de la direction du glissement. Le code est le suivant :

slider.addEventListener('mousedown', startSlide);

function startSlide(e) {
  var startX = e.clientX;
  slider.addEventListener('mousemove', slideImage);

  function slideImage(e) {
    var moveX = e.clientX - startX;
    image.style.transform = 'translateX(' + moveX + 'px)';
  }

  slider.addEventListener('mouseup', stopSlide);
  slider.addEventListener('mouseleave', stopSlide);

  function stopSlide(e) {
    slider.removeEventListener('mousemove', slideImage);
    var moveX = e.clientX - startX;
    var absMoveX = Math.abs(moveX);
    var direction = moveX > 0 ? 'right' : 'left';

    if (absMoveX > slideDistance) {
      if (direction === 'right') {
        slideTo('prev');
      } else {
        slideTo('next');
      }
    } else {
      resetSlide();
    }
  }

  function resetSlide() {
    image.style.transform = 'translateX(0)';
  }

  function slideTo(direction) {
    var currentImageIndex = getIndex(image.getAttribute('src'));

    if (direction === 'prev') {
      currentImageIndex--;
    } else {
      currentImageIndex++;
    }

    if (currentImageIndex < 0) {
      currentImageIndex = imageList.length - 1;
    } else if (currentImageIndex >= imageList.length) {
      currentImageIndex = 0;
    }

    image.src = imageList[currentImageIndex];
    resetSlide();
  }
}

4. Ajouter un effet de zoom

Si nous voulons obtenir l'effet de zoom en faisant glisser l'image, nous pouvons obtenir la distance de glissement dans l'événement de glissement et ajuster la taille de l'image en fonction de la distance . Le code est le suivant :

// 在 slideImage 函数中添加以下代码

function slideImage(e) {
  var moveX = e.clientX - startX;
  var scale = 1 - Math.abs(moveX) / (slider.offsetWidth / 2);

  if (scale < 0.3) {
    scale = 0.3;
  }

  image.style.transform = 'translateX(' + moveX + 'px) scale(' + scale + ')';
}

Grâce à l'implémentation du code ci-dessus, nous pouvons faire glisser l'image vers la gauche et la droite sur la page Web et ajouter un effet de zoom. Dans le même temps, pendant le processus de mise en œuvre, nous pouvons ajuster la distance de glissement, le rapport de mise à l'échelle, etc. selon les besoins pour répondre aux besoins de conception spécifiques.

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!