html slaid untuk dipadam

Dengan populariti peranti mudah alih, semakin banyak tapak web dan aplikasi mula menumpukan pada pengalaman pengguna mudah alih. Antaranya, gelongsor untuk memadam telah menjadi kaedah operasi biasa. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan fungsi padam gelongsor.

1. Reka bentuk struktur HTML

Pertama sekali, anda perlu mereka bentuk senarai dalam HTML yang perlu melaksanakan fungsi padam gelongsor, contohnya:

rreee

Antaranya, item- content adalah kandungan utama item senarai, dan item-delete ialah butang delete untuk dipaparkan semasa meluncur untuk memadam. Perlu diingatkan bahawa dua elemen item-content dan item-delete perlu ditetapkan pada lebar tetap supaya keseluruhan kandungan boleh dipaparkan semasa meluncur.

2. Reka bentuk gaya CSS

Seterusnya, anda perlu menggunakan gaya CSS untuk mereka bentuk item senarai, termasuk menetapkan kedudukan, ketinggian, lebar dan atribut lain bagi setiap item senarai , dan Tetapkan gaya untuk butang padam gelongsor. Anda boleh menggunakan kod berikut untuk mencapai ini:

<ul>
  <li>
    <div class="item-content">
      <div class="item-title">列表标题</div>
      <div class="item-delete">
        <button>删除</button>
      </div>
    </div>
  </li>
</ul>

Kod di atas menetapkan gaya asas seperti ketinggian tetap, sempadan dan warna latar belakang untuk item senarai dan menetapkan kedudukan mutlak untuk dua elemen kandungan item dan item-padam. Antaranya, padding-kanan kandungan item ditetapkan kepada 60px, manakala lebar item-delete ditetapkan kepada 60px, dan jurang 15px ditinggalkan di sebelah kanan butang padam.

3. JavaScript untuk melaksanakan pemadaman gelongsor

Akhir sekali, kod JavaScript perlu digunakan untuk melaksanakan fungsi pemadaman gelongsor. Khususnya, aspek berikut perlu dipertimbangkan:

• Dengar acara mula sentuh, gerak sentuh, akhir sentuh, dapatkan koordinat titik sentuh pada skrin menggunakan event.touches, dan kira anjakan mendatar bagi titik sentuh.
• Gunakan atribut transform untuk mencapai kesan gelongsor.
• Tentukan sama ada butang padam perlu dipaparkan berdasarkan jarak gelongsor, dan laksanakan fungsi padam apabila sentuhan tamat.

Berikut ialah kod pelaksanaan khusus:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 60px 0 15px;
}

.item-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  padding-right: 15px;
  background: #f44336;
  color: #fff;
  text-align: center;
}

.item-delete button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

Dalam kod di atas, setiap item senarai mula-mula dipantau secara berasingan untuk peristiwa touchstart, touchmove dan touchend, dan dikira berdasarkan titik sentuh dan jarak gelongsor Jumlah terjemahan, gunakan transformasi untuk mencapai kesan gelongsor.

Dalam acara hujung sentuh, jika jarak gelongsor melebihi ambang tertentu, item senarai akan dialihkan ke kedudukan deleteWidth dan acara klik akan ditambahkan pada butang padam untuk melaksanakan operasi pemadaman.

Pada ketika ini, pelaksanaan fungsi padam gelongsor selesai. Anda boleh menggunakan kaedah di atas untuk melaksanakan dengan mudah kesan pemadaman gelongsor dalam HTML dan CSS, mengoptimumkan pengalaman pengguna aplikasi mudah alih dan tapak web serta meningkatkan kepuasan pengguna.

Atas ialah kandungan terperinci html slaid untuk dipadam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!