Bagaimana untuk mengikat peristiwa apabila mengecilkan skrin dalam jquery

Dengan populariti peranti mudah alih, semakin ramai orang memilih untuk menggunakan telefon mudah alih, tablet dan peranti mudah alih lain untuk menyemak imbas web Oleh itu, reka bentuk responsif telah menjadi kemahiran penting untuk reka bentuk tapak web moden. Dalam reka bentuk responsif, acara ubah saiz adalah salah satu peristiwa yang paling penting dan boleh digunakan untuk mengesan perubahan dalam saiz tetingkap penyemak imbas untuk mencapai reka letak penyesuaian halaman. jQuery ialah salah satu perpustakaan JavaScript yang paling banyak digunakan pada masa ini, dan saya percaya semua orang sudah biasa dengannya. Jadi, artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengikat acara apabila skrin dikurangkan.

1. Konsep asas acara ubah saiz

Dalam penyemak imbas, peristiwa ubah saiz ialah peristiwa yang dicetuskan apabila saiz tetingkap berubah, dan merupakan peristiwa teras reka bentuk responsif.

1.1. Sintaks acara ubah saiz

Sintaks asas acara ubah saiz adalah seperti berikut:

$(window).resize(function(){
  // 在此处编写窗口大小改变后的操作
});

Dalam kod di atas, $(window) bermaksud memantau tetingkap, resize() Menunjukkan mendaftarkan fungsi panggil balik untuk acara ubah saiz, yang akan dicetuskan apabila saiz tetingkap penyemak imbas berubah.

1.2. Aplikasi acara ubah saiz

Melalui acara ubah saiz, kita boleh mencapai kesan susun atur yang berbeza mengikut saiz tetingkap yang berbeza, seperti menyembunyikan elemen tertentu apabila saiz tetingkap menjadi kurang daripada nilai tertentu , atau tambah gaya baharu pada halaman apabila tetingkap menjadi sangat kecil, dsb.

2. jQuery melaksanakan peristiwa mengikat apabila mengecilkan skrin

Dalam reka bentuk responsif, biasanya kita perlu mengendalikan reka letak halaman secara automatik apabila saiz tetingkap pelayar berubah, yang memerlukan penggunaan acara ubah saiz jQuery .

2.1. Kesan sama ada tetingkap telah dikurangkan

Pertama, kita perlu mengesan sama ada tetingkap semasa telah dikurangkan. Kaedah yang lebih mudah adalah untuk menyimpan lebar tetingkap semasa dalam pembolehubah dan menentukan sama ada lebar tetingkap semasa adalah lebih kecil daripada lebar tetingkap yang disimpan sebelum ini dalam acara ubah saiz. Kodnya adalah seperti berikut:

// 保存当前窗口宽度
var windowWidth = $(window).width();

// 监听resize事件
$(window).resize(function() {
  // 判断当前窗口宽度是否小于之前保存的窗口宽度
  if($(window).width() < windowWidth){
    // 缩小时执行的代码
  } else{
    // 放大时执行的代码
  }
});

Dalam kod di atas, kami melaksanakan beberapa kod apabila tetingkap dikecilkan dan kod lain apabila ia dibesarkan. Kod khusus yang akan dilaksanakan boleh ditentukan berdasarkan keperluan sebenar.

2.2. Peristiwa mengikat

Apabila mengecilkan skrin, kita mungkin perlu melakukan beberapa tindakan tertentu. Sebagai contoh, kita mungkin perlu menyembunyikan beberapa elemen, menukar saiz fon beberapa teks, dsb. Ini memerlukan pengikatan acara yang sepadan dalam acara ubah saiz. Contohnya, kod berikut menukar saiz fon elemen dengan ID #title kepada 12 piksel apabila tetingkap dikurangkan:

$(window).resize(function() {
  // 获取当前窗口宽度
  var width = $(window).width();
  // 判断当前窗口宽度是否小于某一值
  if (width < 768) {
    // 窗口小于768时字号改为12px
    $("#title").css("font-size", "12px");
  } else {
    // 窗口大于等于768时字号改为16px
    $("#title").css("font-size", "16px");
  }
});

Apabila tetingkap dikurangkan, kod ini akan menukar elemen dengan ID #title Saiz fon ditukar kepada 12 piksel; apabila tetingkap dikembangkan, saiz fon elemen akan kembali kepada 16 piksel.

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk mengikat peristiwa apabila skrin dikurangkan. Dalam reka bentuk responsif, menggunakan acara ubah saiz boleh mengawal susun atur elemen halaman dengan sangat berkesan.

Apabila menggunakan acara ubah saiz, kita perlu terlebih dahulu menentukan sama ada tetingkap dikecilkan, dan kemudian melakukan beberapa tindakan. Sebagai contoh, susun atur penyesuaian boleh dicapai dengan menukar saiz fon elemen, menyembunyikan elemen tertentu, dsb. Semoga artikel ini bermanfaat kepada semua orang!

Atas ialah kandungan terperinci Bagaimana untuk mengikat peristiwa apabila mengecilkan skrin dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!