HTML、CSS、jQuery を使用して、スライドしてリスト項目を削除する高度な機能を実装する方法

HTML、CSS、および jQuery を使用して、スライドしてリスト項目を削除する高度な機能を実装する方法

現代の Web 開発では、スライドして削除することは一般的なユーザー インタラクションです。ユーザーがスワイプ ジェスチャを使用してリスト項目を削除できる機能。この記事では、HTML、CSS、jQuery を使用してこの高度な機能を実装する方法を説明し、具体的なコード例を示します。

1. HTML 構造の作成

まず、リスト項目を表示するための基本的な HTML 構造を作成する必要があります。これは、順序なしリスト (

) とリスト項目 (
• ) を使用して実現できます。

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

  2. CSS スタイルの追加

  スライド削除効果を実現するには、CSS を使用してリスト項目のスタイルを設定し、いくつかの CSS アニメーション効果を使用する必要があります。滑り効果を実現します。

  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;
  }

  上記の CSS コードでは、リスト項目の基本スタイルを設定し、.slideout、.sliding# などのアニメーション効果に関連するいくつかのクラス名も定義しました。 ## と .削除 。同時に、「削除」ボタンのスタイルも定義します。

  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: 「削除」ボタンをクリックしたときに削除アニメーションを実行します。
  これまで、HTML、CSS、jQuery を使用してリスト項目をスライドして削除する高度な機能が完成しました。ユーザーは、スライド ジェスチャを通じて 1 つ以上のリスト項目を削除して、データをより便利に管理できます。 HTML、CSS、jQueryを柔軟に活用することで、さまざまな独自のユーザーインタラクション効果や機能を実現し、Webアプリケーションのユーザーエクスペリエンスを向上させることができます。
  注: 上記のコードは単なる例であり、実際の使用には特定のニーズに応じて変更および最適化する必要があります。

以上がHTML、CSS、jQuery を使用して、スライドしてリスト項目を削除する高度な機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。