Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan gelongsor untuk memadam item senarai-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-10-24 09:30:35

asal

1350 orang telah melayarinya

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.

Buat struktur HTML

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

).
```
<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>
```
Salin selepas log masuk
1. 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;
}
```
Salin selepas log masuk
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。同时，我们还定义了一个“删除”按钮的样式。
1. 使用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();
  });
});
```
Salin selepas log masuk
在上述jQuery代码中，我们绑定了以下事件：
- touchstart：当触摸开始时记录起始位置；
- touchmove：在滑动过程中更新位置，并根据滑动距离判断是否进行滑动删除的动画；
- touchend：当触摸结束时根据滑动距离判断是否进行滑动删除的动画；
- click
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: #🎜🎜#

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!