jQuery ist eine beliebte JavaScript-Bibliothek, mit der Sie Webseitenelemente einfach bearbeiten k?nnen. Unter diesen ist die resize()-Methode eine funktionale Methode in jQuery, mit der ?nderungen in der Gr??e von Webseitenelementen verfolgt werden. In diesem Artikel diskutieren wir die Verwendung und Beispiele der resize()-Methode und hoffen, dass die Leser sie nach dem Lernen besser zur L?sung von Problemen in der Webentwicklung anwenden k?nnen.

1. Die Rolle der resize()-Methode

In jQuery wird die resize()-Methode haupts?chlich dazu verwendet, die Gr??en?nderungen des Fensterobjekts zu erfassen und eine entsprechende Funktion auszul?sen, um ein responsives Design oder andere gr??enbezogene Vorg?nge zu erreichen. Wenn sich die Fenstergr??e ?ndert, führt diese Methode automatisch die Bindungsfunktion aus, sodass sich der Seiteninhalt entsprechend anpasst.

2. Verwendung der resize()-Methode

Für die Verwendung der resize()-Methode muss zun?chst eine Funktion erstellt werden, um das Ereignis einer Fenstergr??en?nderung zu verarbeiten. Diese Funktion wird automatisch ausgel?st, wenn sich die Fenstergr??e ?ndert. Als n?chstes wird beim Laden der Seite die Methode resize() aufgerufen und die Funktion als Parameter übergeben. Auf diese Weise wird die gebundene Funktion immer dann ausgeführt, wenn sich die Fenstergr??e ?ndert. Die Syntax der Methode lautet wie folgt:

$(window).resize(function() {
//Der Code zur Behandlung des Gr??en?nderungsereignisses ist hier
});

Unter diesen steht $(window) für Objekt, an das das Ereignis gebunden ist. Auf diese Weise wird der Funktionscode automatisch ausgeführt, wenn sich die Fenstergr??e ?ndert.

3. Beispiele für die resize()-Methode

Schauen wir uns ein paar Beispiele für die resize()-Methode an. Wir erstellen eine Sammlung von Bildern, die sich ?ndert, wenn sich die Fenstergr??e ?ndert.

1. Rasterartige Bildersammlung

Zuerst bereiten wir eine Reihe von Bildern vor, die in einem Raster angeordnet werden. Wenn sich die Gr??e des Fensters ?ndert, ?ndert sich die Anzahl der Bilder, die in jeder Zeile untergebracht werden k?nnen, und die Anzahl der Bilder in jeder Spalte.

HTML-Struktur:

<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>

CSS-Stil:

.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;
}

JavaScript-Code:

$(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. Bildersammlung ein- und ausblenden

Das Folgende ist eine einfache Anzeige der Bildersammlung zum Ein- und Ausblenden. Wenn sich die Fenstergr??e ?ndert, ?ndert sich auch die Gr??e des Bildcontainers.

HTML-Struktur:

<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>

CSS-Stil:

.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;
}

JavaScript-Code:

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

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

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

Fazit

In diesem Artikel haben wir die Verwendung und Beispiele der resize()-Methode in jQuery kennengelernt. Ihre Funktion besteht darin, die Gr??e von zu ?ndern Wenn sich die Fenstergr??e ?ndert, führen Sie die entsprechenden Funktionen aus, um eine Seitenanpassung und andere Zwecke zu erreichen. Gleichzeitig habe ich auch einige Beispiele gesehen, die in tats?chlichen Projekten verwendet werden k?nnen, und ich hoffe, dass sie den Lesern hilfreich sein werden.

Das obige ist der detaillierte Inhalt vonresize()-Methode von jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!