kaedah resize() jquery

jQuery ialah perpustakaan JavaScript popular yang membolehkan anda memanipulasi elemen halaman web dengan mudah. Antaranya, kaedah resize() ialah kaedah berfungsi dalam jQuery yang digunakan untuk mengesan perubahan dalam saiz elemen halaman web. Dalam artikel ini, kami akan membincangkan penggunaan dan contoh kaedah resize(), dengan harapan pembaca boleh menggunakannya dengan lebih baik untuk menyelesaikan masalah dalam pembangunan web selepas belajar.

1. Peranan kaedah resize()

Dalam jQuery, kaedah resize() digunakan terutamanya untuk menangkap perubahan saiz objek tetingkap dan mencetuskan fungsi yang sepadan untuk mencapai responsif reka bentuk atau operasi berkaitan saiz lain. Apabila saiz tetingkap berubah, kaedah ini secara automatik melaksanakan fungsi terikat supaya kandungan halaman menyesuaikan diri dengan sewajarnya.

2. Penggunaan kaedah resize()

Menggunakan kaedah resize() memerlukan terlebih dahulu mewujudkan fungsi untuk mengendalikan peristiwa perubahan saiz tetingkap. Fungsi ini dicetuskan secara automatik apabila saiz tetingkap berubah. Seterusnya, kaedah resize() dipanggil apabila halaman dimuatkan, melepasi fungsi sebagai parameter. Dengan cara ini, apabila saiz tetingkap berubah, fungsi terikat akan dilaksanakan. Sintaks kaedah adalah seperti berikut:

$(window).resize(function() {
//Kod untuk mengendalikan acara perubahan saiz ada di sini
});

di mana, $ (tetingkap) mewakili objek yang akan diikat oleh acara tersebut. Dengan cara ini, apabila saiz tetingkap berubah, kod fungsi akan dilaksanakan secara automatik.

3. Contoh kaedah resize()

Mari kita lihat beberapa contoh kaedah resize(). Kami akan membuat koleksi imej yang berubah apabila saiz tetingkap berubah.

1. Koleksi gambar berbentuk grid

Pertama, kami menyediakan set gambar yang akan disusun dalam grid. Apabila saiz tetingkap berubah, bilangan gambar yang boleh dimuatkan dalam setiap baris dan bilangan gambar dalam setiap lajur akan berubah.

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

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

Kod 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 di bawah Ia adalah paparan koleksi gambar pudar masuk dan pudar yang mudah. Apabila saiz tetingkap berubah, saiz bekas imej berubah.

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

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

Kod JavaScript:

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

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

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

Kesimpulan

Melalui artikel ini, kami mempelajari tentang ubah saiz Penggunaan dan contoh kaedah () dalam jQuery adalah untuk melaksanakan fungsi yang sepadan apabila saiz tetingkap berubah, dengan itu mencapai penyesuaian halaman dan tujuan lain. Pada masa yang sama, saya juga melihat beberapa contoh yang mungkin digunakan dalam projek sebenar, yang saya harap dapat membantu pembaca.

Atas ialah kandungan terperinci kaedah resize() jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!