Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan gelongsor untuk memadam item senarai

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan gelongsor untuk memadam item senarai

Dalam pembangunan web moden, meluncur ke padam ialah ciri interaksi Pengguna biasa yang membolehkan pengguna memadamkan item senarai melalui gerak isyarat leret. Artikel ini menerangkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan ini dan menyediakan contoh kod khusus.

1. Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML asas untuk memaparkan item senarai. Ini boleh dicapai menggunakan senarai tidak tersusun (

) dan item senarai (
• ).

  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
  </ul>

  2. Tambah gaya CSS

  Untuk mencapai kesan gelongsor untuk memadam, kita perlu menggunakan CSS untuk menggayakan item senarai dan gunakan beberapa kesan Animasi CSS untuk mencapai kesan gelongsor.

  li {
    position: relative;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }
  
  li.slideout {
    transition: all 0.3s ease-out;
    transform: translateX(0);
  }
  
  li.sliding {
    transition: all 0.3s ease-out;
  }
  
  li.delete {
    background: #ff4f4f;
    color: #fff;
  }
  
  .li-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: #ff4f4f;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  Dalam kod CSS di atas, kami menetapkan gaya asas item senarai dan juga menentukan beberapa nama kelas yang berkaitan dengan kesan animasi, seperti .slideout, .meluncur dan .delete. Pada masa yang sama, kami juga menentukan gaya butang "Padam". .slideout、.sliding和.delete。同时，我们还定义了一个“删除”按钮的样式。

  3. 使用jQuery实现滑动删除效果

  接下来，我们需要使用jQuery来实现滑动删除的效果。我们可以通过在li元素上绑定事件来实现。

  $(document).ready(function() {
    var sliding = false;
    var startX = 0;
    var deltaX = 0;
    var threshold = 50;
  
    $('#list li').on('touchstart', function(event) {
      startX = event.originalEvent.touches[0].pageX;
      deltaX = 0;
    });
  
    $('#list li').on('touchmove', function(event) {
      if (sliding) {
        deltaX = event.originalEvent.touches[0].pageX - startX;
        if (deltaX < -threshold) {
          $(this).addClass('sliding');
        } else if (deltaX > threshold) {
          $(this).removeClass('sliding');
        }
        event.preventDefault();
      }
    });
  
    $('#list li').on('touchend', function(event) {
      sliding = false;
      if (deltaX < -threshold) {
        $(this).addClass('slideout');
      } else if (deltaX > threshold) {
        $(this).removeClass('sliding');
      }
    });
  
    $('.li-delete-btn').on('click', function(event) {
      $(this).closest('li').addClass('delete');
      $(this).closest('li').slideUp(300).remove();
    });
  });

  在上述jQuery代码中，我们绑定了以下事件：

  • touchstart：当触摸开始时记录起始位置；
  • touchmove：在滑动过程中更新位置，并根据滑动距离判断是否进行滑动删除的动画；
  • touchend：当触摸结束时根据滑动距离判断是否进行滑动删除的动画；
  • click
  Gunakan jQuery untuk mencapai kesan padam gelongsor
  Seterusnya, kita perlu menggunakan jQuery untuk mencapai kesan padam gelongsor. Kita boleh melakukan ini dengan mengikat peristiwa pada elemen li.

  rrreee

  Dalam kod jQuery di atas, kami telah mengikat peristiwa berikut: #🎜🎜#
  #🎜🎜#touchstart: Rekod kedudukan permulaan apabila sentuhan bermula ; #🎜🎜##🎜🎜#touchmove: Kemas kini kedudukan semasa proses gelongsor dan tentukan sama ada untuk melakukan animasi pemadaman gelongsor berdasarkan jarak gelongsor; >touchend: Animasi untuk menentukan sama ada hendak melakukan pemadaman gelongsor berdasarkan jarak gelongsor apabila sentuhan tamat; "butang diklik. #🎜🎜##🎜🎜##🎜🎜#Setakat ini, kami telah menyelesaikan fungsi lanjutan gelongsor untuk memadam item senarai menggunakan HTML, CSS dan jQuery. Pengguna boleh memadamkan satu atau lebih item senarai melalui gerak isyarat gelongsor untuk mengurus data dengan lebih mudah. Dengan menggunakan HTML, CSS dan jQuery secara fleksibel, kami boleh mencapai pelbagai kesan dan fungsi interaksi pengguna yang unik dan meningkatkan pengalaman pengguna aplikasi web. #🎜🎜##🎜🎜#Nota: Kod di atas hanyalah contoh dan perlu diubah suai dan dioptimumkan mengikut keperluan khusus untuk kegunaan sebenar. #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan gelongsor untuk memadam item senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!