méthode resize() de jquery

WBOY
Libérer: 2023-05-28 10:24:09
original
1733 Les gens l'ont consulté

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 :

image 1 image 2 image 3 image 4 image 5
Copier après la connexion

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; }
Copier après la connexion

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' }); }
Copier après la connexion

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 :

Copier après la connexion

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; }
Copier après la connexion

Code JavaScript :

$(document).ready(function() { resizeFadeGallery(); }); $(window).resize(function() { resizeFadeGallery(); }); function resizeFadeGallery() { var windowHeight = $(window).height(); $('.fade-gallery').css({ 'height': windowHeight + 'px' }); }
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!