kaedah gelongsor jquery-Soal Jawab bahagian hadapan-php.cn

kaedah gelongsor jquery

WBOY

Lepaskan： 2023-05-24 22:43:37

asal

571 orang telah melayarinya

jQuery ialah perpustakaan Javascript yang sangat popular yang mengandungi sejumlah besar fungsi dan kaedah utiliti yang membolehkan kami memanipulasi elemen HTML dan CSS dengan lebih mudah. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan kaedah gelongsor menggunakan jQuery.

Pengenalan

Gelongsor ialah tindakan interaksi pengguna biasa yang membolehkan pengguna menyeret elemen pada halaman dan mungkin diperlukan dalam beberapa situasi. Sebagai contoh, dalam imej karusel, kami berharap pengguna boleh bertukar kepada gambar seterusnya atau gambar sebelumnya melalui gerak isyarat, jadi kami perlu melaksanakan kaedah gelongsor untuk mencapainya.

Pengecaman gerak isyarat

Sebelum melaksanakan kaedah gelongsor, kita perlu melakukan pengecaman gerak isyarat terlebih dahulu untuk menentukan sama ada pengguna menggelongsor secara mendatar atau menegak. Dalam jQuery, kita boleh menggunakan acara seperti mousedown, mousemove dan mouseup untuk melaksanakan pengecaman gerak isyarat. Kod khusus adalah seperti berikut:

var startX, startY, endX, endY;

$(document).on('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
});

$(document).on('mousemove', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

$(document).on('mouseup', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

function swipeDirection(startX, startY, endX, endY) {
  var diffX = Math.abs(startX - endX);
  var diffY = Math.abs(startY - endY);

  if (diffX > diffY) {
    return (startX > endX) ? 'left' : 'right';
  } else {
    return (startY > endY) ? 'up' : 'down';
  }
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan acara mousedown untuk merekodkan koordinat di mana pengguna mula mencetuskan gerak isyarat, dan kemudian menggunakan acara mousemove untuk merakam koordinat di mana gelongsor pengguna berakhir Kita boleh menggunakan swipeDirectionFungsi menentukan sama ada pengguna meleret secara mendatar atau menegak. Akhir sekali, kami menggunakan acara mouseup untuk merekod koordinat apabila gerak isyarat tamat.

Melaksanakan kaedah gelongsor

Selepas melakukan pengecaman gerak isyarat, kita boleh melaksanakan kaedah gelongsor. Dalam contoh berikut, kami akan menggunakan kaedah animate jQuery untuk melaksanakan animasi gelongsor yang lancar, supaya imej boleh mengikut gerak isyarat apabila ia diseret.

<!DOCTYPE html>
<html>
<head>
  <title>滑动方法示例</title>
</head>
<body>
  <div style="width: 800px; height: 400px; overflow: hidden;">
    <img id="slider" style="width: 4000px; height: 400px;" src="1.jpg, 2.jpg, 3.jpg, 4.jpg">
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var slider = $('#slider');
  var currentPos = 0; //记录当前的位置
  var sliderWidth = slider.width(); //获取图片宽度
  var len = slider.children('img').length; //获取图片数量

  //监听鼠标按下事件
  slider.on('mousedown', function(e) {
    var startX = e.pageX; //获取鼠标按下时的坐标
    var left = parseFloat(slider.css('left')); //获取初始位置
    var endX;

    //监听鼠标移动事件
    slider.on('mousemove', function(e) {
      endX = e.pageX; //获取鼠标移动时的坐标

      slider.css('left', left + endX - startX); //设置图片位置
    });

    //监听鼠标松开事件
    slider.on('mouseup', function(e) {
      $(this).off('mousemove'); //取消鼠标移动事件的监听

      var direction = swipeDirection(startX, 0, endX, 0); //判断手势方向

      if (direction === 'left' && currentPos < len - 1) {
        currentPos++; //向左滑动，图片位置加1
        slider.animate({
          left: '-=' + sliderWidth
        });
      } else if (direction === 'right' && currentPos > 0) {
        currentPos--; //向右滑动，图片位置减1
        slider.animate({
          left: '+=' + sliderWidth
        });
      } else {
        slider.animate({
          left: '-=' + (endX - startX) //回到原来的位置
        });
      }
    });

    //阻止默认事件
    e.preventDefault();
  });
</script>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan acara mousedown untuk merekod koordinat pengguna semasa meluncurkan gambar, dan kemudian gunakan acara mousemove untuk terus mengira jarak gambar harus mengikut gelongsor jari, dan akhirnya gunakan mouseupAcara untuk menentukan arah gelongsor pengguna dan melakukan animasi gelongsor yang lancar.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk melaksanakan kaedah gelongsor. Kami mula-mula melakukan pengecaman gerak isyarat untuk menentukan sama ada pengguna menggelongsor secara mendatar atau menegak, dan kemudian melaksanakan animasi gelongsor yang lancar berdasarkan arah gelongsor pengguna. Dengan cara ini, kami boleh melaksanakan banyak kesan interaksi pengguna tersuai dalam halaman, memberikan pengguna pengalaman yang lebih baik.

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