삭제할 HTML 슬라이드-프런트엔드 Q&A-php.cn

삭제할 HTML 슬라이드

PHPz

풀어 주다： 2023-05-15 13:15:07

원래의

699명이 탐색했습니다.

모바일 장치의 인기로 인해 점점 더 많은 웹사이트와 애플리케이션이 모바일 사용자 경험에 초점을 맞추기 시작했습니다. 그중에서도 슬라이드하여 삭제하는 것이 일반적인 조작 방법이 되었습니다. 이 기사에서는 HTML과 CSS를 사용하여 슬라이딩 삭제 기능을 구현하는 방법을 소개합니다.

HTML 구조 디자인

먼저 HTML에서 슬라이딩 삭제 기능을 구현해야 하는 목록을 디자인해야 합니다. 예:

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

로그인 후 복사

그 중 item-content가 목록 항목의 주요 내용입니다. , 항목 삭제는 슬라이딩 시 삭제 버튼이 표시됩니다. 슬라이딩할 때 전체 콘텐츠가 표시될 수 있도록 item-content와 item-delete 두 요소를 고정 너비로 설정해야 한다는 점에 유의해야 합니다.

CSS 스타일 디자인

다음으로 CSS 스타일을 사용하여 각 목록 항목의 위치, 높이, 너비 및 기타 속성을 설정하고 슬라이딩 삭제 버튼의 스타일을 설정하는 등 목록 항목을 디자인해야 합니다. 이를 달성하려면 다음 코드를 사용할 수 있습니다.

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

로그인 후 복사

위 코드는 목록 항목의 고정 높이, 테두리, 배경색과 같은 기본 스타일을 설정하고 항목 내용과 항목 삭제 두 요소에 대한 절대 위치를 설정합니다. 그 중 item-content의 padding-right는 60px로, item-delete의 width는 60px로 설정되었으며, 삭제 버튼 오른쪽에는 15px의 간격이 남습니다.

슬라이딩 삭제 기능을 구현하기 위한 자바스크립트

마지막으로 슬라이딩 삭제 기능을 구현하기 위해서는 자바스크립트 코드를 사용해야 합니다. 구체적으로 다음 측면을 고려해야 합니다.

touchstart, touchmove, touchend 이벤트를 듣고, event.touches를 사용하여 화면의 터치 지점 좌표를 얻고, 터치 지점의 수평 변위를 계산합니다.
슬라이딩 효과를 얻으려면 변형 속성을 사용하세요.
슬라이딩 거리에 따라 삭제 버튼을 표시할지 여부를 결정하고, 터치가 끝나면 삭제 기능을 구현합니다.

구체적인 구현 코드는 다음과 같습니다.

var startX, moveX, delWidth = 60;
var list = document.getElementsByTagName('li');

for (var i = 0; i < list.length; i++) {
  list[i]._index = i;

  list[i].addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    moveX = 0;
  });

  list[i].addEventListener('touchmove', function(event) {
    moveX = event.touches[0].clientX - startX;
    if (moveX > 0) {
      this.style.transform = 'translateX(' + moveX + 'px)';
    }
  });

  list[i].addEventListener('touchend', function(event) {
    if (moveX > delWidth / 2) {
      this.style.transform = 'translateX(' + delWidth + 'px)';
      this.querySelector('.item-delete').addEventListener('click', function(event) {
        var index = event.currentTarget.parentNode.parentNode._index;
        console.log('delete item: ' + index);
        // TODO 实现删除操作
      });
    } else {
      this.style.transform = 'translateX(0px)';
    }
  });
}

로그인 후 복사

위 코드에서 각 목록 항목은 먼저 touchstart, touchmove, touchend 이벤트에 대해 별도로 모니터링되며 터치 지점과 슬라이딩 거리를 기준으로 번역량이 계산됩니다. 슬라이딩 효과를 얻기 위해 변환이 사용됩니다.

touchend 이벤트에서 슬라이딩 거리가 특정 임계값을 초과하면 목록 항목이 deleteWidth 위치로 이동되고 삭제 버튼에 클릭 이벤트가 추가되어 삭제 작업을 구현합니다.

이제 슬라이딩 삭제 기능 구현이 완료되었습니다. 위의 방법을 사용하면 HTML 및 CSS에서 슬라이딩 삭제 효과를 쉽게 구현하고, 모바일 애플리케이션 및 웹 사이트의 사용자 경험을 최적화하고, 사용자 만족도를 높일 수 있습니다.

위 내용은 삭제할 HTML 슬라이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!