Bagaimana untuk menetapkan gelongsor kiri dan kanan dalam jquery

Dalam pembangunan bahagian hadapan, kesan halaman dinamik boleh meningkatkan pengalaman pengguna dan meningkatkan kelancaran penggunaan tapak web. Kesan gelongsor kiri dan kanan adalah salah satu kesan animasi biasa. jQuery menyediakan beberapa cara untuk mencapai kesan ini. Artikel ini akan memperkenalkan beberapa kaedah jQuery untuk menetapkan kesan gelongsor kiri dan kanan.

1. kaedah jQuery.animate()

Gunakan kaedah jQuery: animate() untuk mengalihkan elemen daripada satu keadaan ke keadaan lain dalam masa yang ditetapkan. Kaedah animate() boleh meluncur sebarang elemen, termasuk elemen peringkat blok dan elemen sebaris.

Kod contoh:

$(document).ready(function() {
  $(".box").animate({left: '250px'});
});

Kod di atas akan mengalihkan elemen .box 250 piksel ke kanan Anda boleh menukar kedudukan menegak elemen dengan mengubah suai atribut kiri.

2. kaedah jQuery.slide()

kaedah jQuery: slide() boleh meluncurkan elemen ke kedudukan yang ditentukan. Anda boleh mengawal kesan gelongsor elemen dengan menentukan tempoh dan fungsi panggil balik.

Kod sampel:

$(document).ready(function() {
  $(".box").slideDown("slow");
});

Kod di atas boleh membuat elemen .box meluncur ke bawah, dan arah elemen boleh ditukar dengan menyatakan arah.

3. kaedah jQuery.animate() dan atribut kedudukan CSS

Anda boleh menggunakan kaedah jQuery:animate() dan atribut kedudukan CSS dalam kombinasi untuk mencapai kiri dan kanan kesan gelongsor.

Kod sampel:

$(document).ready(function() {
  $("button").click(function() {
    $(".box").animate({left: '250px'}, "slow");
  });
});

Kod ini akan menambah acara klik pada butang butang dan mengalihkan elemen .box 250 piksel ke kanan. Anda boleh menukar arah gelongsor elemen dari kanan ke kiri atau dari kiri ke kanan dengan mengubah suai nilai atribut kiri.

4. Pustaka jQuery.touchSwipe

jQuery.touchSwipe ialah pemalam jQuery yang sangat baik yang boleh melaksanakan acara gelongsor sentuh. Dengan menggunakan pemalam ini, anda boleh mencapai kesan dengan mudah seperti meluncur laman web ke kiri dan kanan.

Kod contoh:

$(document).ready(function() {
  $("#slider").swipe({
    swipeLeft: function() {
      $(this).find("div.prev").click();
    },
    swipeRight: function() {
      $(this).find("div.next").click();
    },
    threshold: 75 // 75像素以内的滑动事件不被触发
  });
});

Kod di atas akan menambah acara gelongsor kiri dan kanan pada elemen dengan ID #slider Jika sentuhan meluncur ke kiri, acara klik div.prev akan dicetuskan; jika sentuhan meluncur ke kanan Semasa meluncur, acara klik div.next dicetuskan. Dalam contoh ini, atribut ambang ditetapkan kepada 75, yang bermaksud bahawa jika peristiwa sentuhan lebih kecil daripada 75 piksel, peristiwa leret kiri dan kanan tidak akan dicetuskan.

Kesimpulan

Di atas adalah beberapa kaedah biasa untuk menetapkan gelongsor kiri dan kanan dalam jQuery menyediakan pelbagai kaedah yang fleksibel untuk mencapai kesan animasi ini keperluan sebenar. Apabila mencapai kesan ini, perhatian harus diberikan kepada isu seperti keserasian penyemak imbas dan pengalaman pengguna untuk memastikan kebolehgunaan tapak web dan kepuasan pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gelongsor kiri dan kanan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!