Maison >interface Web >js tutoriel >Comment utiliser JavaScript pour obtenir l'effet de faire glisser des images de haut en bas ?

Comment utiliser JavaScript pour obtenir l'effet de faire glisser des images de haut en bas ?

王林original: 2023-10-18 09:09:371521parcourir

JavaScript 如何实现图片的上下拖动切换效果？

JavaScript Comment obtenir l'effet de faire glisser des images de haut en bas ?

Avec le développement d'Internet, les images jouent un rôle important dans nos vies et notre travail. Afin d'améliorer l'expérience utilisateur, nous devons souvent ajouter des effets spéciaux ou des effets interactifs aux images. Parmi eux, l'effet de faire glisser les images de haut en bas pour basculer est un effet très courant, simple et pratique. Cet article explique comment utiliser JavaScript pour obtenir cet effet et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer un fichier HTML pour afficher les images et obtenir des effets de glissement. Le code est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #container {
        width: 400px;
        height: 300px;
        position: relative;
        overflow: hidden;
      }
      
      #image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img id="image" src="image.jpg" alt="Image">
    </div>
    
    <script src="script.js"></script>
  </body>
</html>

Dans le code ci-dessus, nous créons un div avec l'identifiant "conteneur" pour contenir l'image. Nous le définissons sur un positionnement relatif et définissons ses styles de largeur, de hauteur et de débordement pour limiter la zone d'affichage de l'image. Nous avons également créé une balise img avec un identifiant « image » pour afficher les images. Nous le définissons sur un positionnement absolu et définissons sa largeur et sa hauteur à 100 % pour garantir que l'image remplit le conteneur parent.

Ensuite, nous devons écrire du code JavaScript pour obtenir l'effet de glissement de l'image. Créez un fichier JavaScript nommé script.js et ajoutez le code suivant au fichier :

window.onload = function() {
  var container = document.getElementById("container");
  var image = document.getElementById("image");
  
  var isDragging = false;
  var startY = 0;
  var offset = 0;
  
  image.addEventListener("mousedown", function(event) {
    isDragging = true;
    startY = event.clientY;
    offset = image.offsetTop;
  });
  
  window.addEventListener("mouseup", function() {
    isDragging = false;
  });
  
  container.addEventListener("mousemove", function(event) {
    if (!isDragging) return;
    
    var mouseY = event.clientY;
    var deltaY = mouseY - startY;
    var newOffset = offset + deltaY;
    
    image.style.top = newOffset + "px";
  });
};

Dans le code ci-dessus, nous obtenons d'abord les éléments DOM du conteneur et de l'image, qui sont stockés respectivement dans les variables conteneur et image. Ensuite, nous avons créé des variables pour stocker les informations liées au glissement.

Ensuite, nous lions l'événement mousedown à l'image. Lorsque la souris est enfoncée, l'indicateur isDragging est défini sur true et la coordonnée Y actuelle de la souris et le décalage de l'image sont enregistrés. Ensuite, nous avons lié l'événement mouseup à l'objet window Lorsque la souris est relâchée, l'indicateur isDragging est défini sur false, indiquant que le glissement est terminé. Enfin, nous lions l'événement mousemove au conteneur. Lorsque la souris se déplace dans le conteneur, si elle est déplacée, nous calculons le nouveau décalage de l'image et l'appliquons au style supérieur de l'image pour réaliser l'effet de glissement de l'image. .

À ce stade, nous avons terminé la mise en œuvre de l'effet de commutation de haut en bas de l'image. Vous pouvez modifier ou ajuster le code en fonction des besoins réels pour répondre à différents effets et exigences.

Grâce à l'exemple de code ci-dessus, nous pouvons voir que JavaScript est très flexible et puissant. Grâce à quelques opérations DOM simples et à la liaison d'événements, nous pouvons obtenir une variété d'effets interactifs. J'espère que cet article pourra vous aider, si vous avez des questions, n'hésitez pas à nous 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!

JavaScript html JS 对象事件 dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JavaScript pour implémenter la fonction de compte à rebours sur les pages Web ?Article suivant：Comment utiliser JavaScript pour implémenter la fonction de compte à rebours sur les pages Web ?

Articles Liés

Voir plus