méthode resize() de jquery

jQuery est une bibliothèque JavaScript populaire qui vous permet de manipuler facilement les éléments d'une page Web. Parmi elles, la méthode resize() est une méthode fonctionnelle dans jQuery utilisée pour suivre les changements de taille des éléments de page Web. Dans cet article, nous discuterons de l'utilisation et des exemples de la méthode resize(), en espérant que les lecteurs pourront mieux l'appliquer pour résoudre des problèmes de développement Web après avoir appris.

1. Le rôle de la méthode resize()

Dans jQuery, la méthode resize() est principalement utilisée pour capturer les changements de taille de l'objet fenêtre et déclencher une fonction correspondante pour obtenir une conception réactive ou d'autres opérations liées à la taille. Lorsque la taille de la fenêtre change, cette méthode exécute automatiquement la fonction liée afin que le contenu de la page s'adapte de manière appropriée.

2. Utilisation de la méthode resize()

L'utilisation de la méthode resize() nécessite d'abord d'établir une fonction pour gérer l'événement de changement de taille de fenêtre. Cette fonction se déclenche automatiquement lorsque la taille de la fenêtre change. Ensuite, la méthode resize() est appelée lors du chargement de la page, en passant la fonction en paramètre. De cette façon, chaque fois que la taille de la fenêtre change, la fonction liée sera exécutée. La syntaxe de la méthode est la suivante :

$(window).resize(function() {
//Le code pour gérer l'événement de changement de taille est ici
}

Parmi eux, $(window) représente le objet auquel l'événement est lié. De cette façon, lorsque la taille de la fenêtre change, le code de fonction sera exécuté automatiquement.

3. Exemples de la méthode resize()

Regardons quelques exemples de la méthode resize(). Nous allons créer une collection d'images qui change à mesure que la taille de la fenêtre change.

1. Collection d'images en forme de grille

Tout d'abord, nous préparons un ensemble d'images, qui seront disposées dans une grille. Lorsque la taille de la fenêtre change, le nombre d'images pouvant être hébergées dans chaque ligne et le nombre d'images dans chaque colonne changeront.

Structure HTML :

<div class="image-grid">
  <img src="image1.jpg" alt="image 1"/>
  <img src="image2.jpg" alt="image 2"/>
  <img src="image3.jpg" alt="image 3"/>
  <img src="image4.jpg" alt="image 4"/>
  <img src="image5.jpg" alt="image 5"/>
</div>

Style CSS :

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.image-grid img {
  margin: 5px;
  max-width: 100%;
  height: auto;
}

Code JavaScript :

$(document).ready(function() {
  resizeImageGrid();
});

$(window).resize(function() {
  resizeImageGrid();
});

function resizeImageGrid() {
  var windowWidth = $(window).width();
  var imageSize = (windowWidth < 480) ? Math.floor(windowWidth / 2) : Math.floor(windowWidth / 4);
  $('.image-grid img').css({
    'width': imageSize + 'px',
    'height': imageSize + 'px'
  });
}

2. Collection d'images en fondu entrant et sortant

Ce qui suit est un simple affichage de collection d'images en fondu entrant et sortant. Lorsque la taille de la fenêtre change, la taille du conteneur d'images change.

Structure HTML :

<div class="fade-gallery">
  <div class="gallery-item active">
    <img src="image1.jpg" alt="image 1"/>
  </div>
  <div class="gallery-item ">
    <img src="image2.jpg" alt="image 2"/>
  </div>
  <div class="gallery-item ">
    <img src="image3.jpg" alt="image 3"/>
  </div>
  <div class="gallery-item ">
    <img src="image4.jpg" alt="image 4"/>
  </div>
  <div class="gallery-item ">
    <img src="image5.jpg" alt="image 5"/>
  </div>
</div>

Style CSS :

.fade-gallery {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.gallery-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.gallery-item.active {
  opacity: 1;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
}

Code JavaScript :

$(document).ready(function() {
  resizeFadeGallery();
});

$(window).resize(function() {
  resizeFadeGallery();
});

function resizeFadeGallery() {
  var windowHeight = $(window).height();
  $('.fade-gallery').css({
    'height': windowHeight + 'px'
  });
}

Conclusion

À travers cet article, nous avons appris l'utilisation et des exemples de la méthode resize() dans jQuery. Sa fonction est de changer la taille de. la fenêtre lorsque la taille de la fenêtre change. Exécutez les fonctions correspondantes pour réaliser l'adaptation de la page et à d'autres fins. En même temps, j'ai également vu quelques exemples qui peuvent être utilisés dans des projets réels et qui, je l'espère, seront utiles aux lecteurs.

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!