HTML, CSS 및 jQuery를 사용하여 목록 항목을 삭제하는 슬라이딩 고급 기능을 구현하는 방법

HTML, CSS 및 jQuery를 사용하여 슬라이딩하여 목록 항목 삭제 고급 기능을 구현하는 방법

현대 웹 개발에서 슬라이딩하여 삭제는 사용자가 슬라이딩 제스처를 통해 목록 항목을 삭제할 수 있는 일반적인 사용자 상호 작용 기능입니다. 이 문서에서는 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과 같은 애니메이션 효과와 관련된 일부 클래스 이름도 정의했습니다. 및 .delete. 동시에 "삭제" 버튼의 스타일도 정의합니다. .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
  jQuery를 사용하여 슬라이딩 삭제 효과 얻기
  다음으로 jQuery를 사용하여 슬라이딩 삭제 효과를 구현해야 합니다. li 요소에 이벤트를 바인딩하여 이를 수행할 수 있습니다.

  rrreee

  위의 jQuery 코드에서는 다음 이벤트를 바인딩했습니다. 🎜
  🎜touchstart: 터치가 시작될 때 시작 위치를 기록합니다. 🎜🎜touchmove: 슬라이딩 과정 중 위치를 업데이트하고 슬라이딩 거리에 따라 슬라이딩 삭제 애니메이션 수행 여부를 결정합니다. 🎜🎜touchend: 터치가 끝나면 슬라이딩 거리에 따라 슬라이딩 삭제 애니메이션 수행 여부를 결정합니다. ; 🎜🎜 클릭: "삭제" 버튼을 클릭하면 삭제 애니메이션을 수행합니다. 🎜🎜🎜이제 HTML, CSS 및 jQuery를 사용하여 목록 항목을 삭제하는 슬라이딩 고급 기능을 완료했습니다. 사용자는 슬라이딩 제스처를 통해 하나 이상의 목록 항목을 삭제할 수 있어 데이터를 보다 편리하게 관리할 수 있습니다. HTML, CSS 및 jQuery를 유연하게 사용하여 다양하고 고유한 사용자 상호 작용 효과 및 기능을 달성하고 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 🎜🎜참고: 위 코드는 단지 예시일 뿐이며 실제 사용을 위한 특정 요구 사항에 따라 수정 및 최적화되어야 합니다. 🎜

위 내용은 HTML, CSS 및 jQuery를 사용하여 목록 항목을 삭제하는 슬라이딩 고급 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!