jquery's resize() method

jQuery is a popular JavaScript library that allows you to easily manipulate web page elements. Among them, the resize() method is a functional method in jQuery used to track changes in the size of web page elements. In this article, we will discuss the use and examples of the resize() method, hoping that readers can better apply it to solve problems in web development after learning.

1. The role of the resize() method

In jQuery, the resize() method is mainly used to capture the size changes of the window object and trigger a corresponding function to achieve responsive design. or other size-related operations. When the window size changes, this method automatically executes the bound function so that the page content adapts appropriately.

2. Use of resize() method

Using the resize() method requires first establishing a function to handle the event of window size change. This function is automatically triggered when the window size changes. Next, the resize() method is called when the page loads, passing the function as a parameter. This way, whenever the window size changes, the bound function will be executed. The syntax of the method is as follows:

$(window).resize(function() {
//The code for handling the size change event is here
});

Among them, $ (window) represents the object to which the event is to be bound. In this way, when the window size changes, the function code will be executed automatically.

3. Examples of the resize() method

Let’s look at several examples of the resize() method. We will make a collection of images that changes as the window size changes.

1. Grid-shaped picture collection

First, we prepare a set of pictures, which will be arranged in a grid. When the size of the window changes, the number of pictures that can be accommodated in each row and the number of pictures in each column will change.

HTML structure:

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

.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. Fade in and out image collection

Below It is a simple fade-in and fade-out picture collection display. When the window size changes, the size of the image container changes.

HTML structure:

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

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

Conclusion

Through this article, we learned about resize The use and examples of the () method in jQuery are to execute corresponding functions when the window size changes, thereby achieving page adaptation and other purposes. At the same time, I also saw some examples that may be used in actual projects, which I hope will be helpful to readers.

The above is the detailed content of jquery's resize() method. For more information, please follow other related articles on the PHP Chinese website!