jQuery 의 왼쪽 미끄럼 을 기반 으로 삭제 단추 의 예제 가 나타 납 니 다.

최근 프로젝트 를 진행 하 던 중 웹 페이지 에서 QQ 세 션 목록 과 같은 왼쪽 슬라이드 에 삭제 버튼 이 나타 나 는 효 과 를 구현 하기 위해 하 나 를 써 보 았 습 니 다.
기본 요구
저 희 는 플랫폼 을 뛰 어 넘 는 앱 을 만 들 고 있 기 때문에 안의 일부 화면 은 바로 WebView 가 불 러 온 웹 페이지 이기 때문에 웹 페이지 를 사용 하여 이러한 효 과 를 실현 해 야 합 니 다.왼쪽으로 미 끄 러 질 때 삭제 단 추 를 표시 하고 오른쪽으로 미 끄 러 지 며 삭제 단 추 를 숨 겨 야 합 니 다.
완제품 예시 도
어,먼저 그림 을 그 려 보 자.다음은 PC 브 라 우 저 와 모 바 일 브 라 우 저 에서 의 효과 입 니 다.
PC 브 라 우 저

핸드폰 브 라 우 저

사고의 방향 을 실현 하 다.
나의 실현 방향 을 설명 하기 위해 두 개의 그림 을 만들어 보조 적 으로 설명 했다.
우선 그림 1 을 보 세 요.그림 에서 저 희 는 모든 줄 의 폭 이 브 라 우 저의 폭 을 초과 하도록 설정 합 니 다.그 초과 부분 은 버튼 을 놓 는 구역 입 니 다.브 라 우 저의 최대 폭 을 초과 하기 때문에 단추 영역 은 보이 지 않 고 왼쪽 의 일반적인 정보 부분 만 표시 할 수 있 습 니 다.

그림 1 일반 상태
그 다음 에 저 희 는 왼쪽 의 일반적인 정보 구역 을 감청 하고 미끄럼 사건 을 감청 합 니 다(구체 적 으로 어떻게 감청 하 는 지 는 고려 하지 않 습 니 다).우리 가 왼쪽 미끄럼 사건 을 감청 할 때,우 리 는 상응하는 줄 을 왼쪽으로 이동 시 켜 버튼 을 표시 하 게 하고,동시에 왼쪽 이 넘 는 부분 이 가 려 진다(그림 2 를 보십시오).

그림 2 왼쪽 미끄럼 상태
우리 가 오른쪽으로 미 끄 러 질 때,우 리 는 상응하는 줄 을 왼쪽 에서 0 으로 옮 길 때 까지 회답 하면 된다.
관건 적 실현 방식
왼쪽 미끄럼 과 오른쪽 미끄럼 에 대해 저 희 는 일반적인 정보 구역 의 marin-left 를 설정 하여 이 루어 집 니 다.margin-left 를 마이너스 로 설정 할 때 왼쪽 미끄럼 을 실현 하고 margin-left 를 0 으로 다시 설정 할 때 오른쪽 미끄럼 을 실현 합 니 다.
미끄럼 사건 감청 에 대해 서 는 감청 마우스(손가락)를 누 르 고 들 어 올 리 는 것 으로 이 뤄 지 며,두 점 의 X 좌표 차이 에 따라 플러스 마이너스 로 오른쪽 이 미 끄 러 지 는 지 왼쪽 이 미 끄 러 지 는 지 판정 한다.
전체 코드
주의해 야 할 것 은 제 가 테스트 할 때 chrome 의 일반 모드 와 mobile 시 뮬 레이 터 모드 를 사 용 했 는데 두 가지 모드 에서 감청 이 다르다 는 것 을 발 견 했 습 니 다.그래서 저 는 두 가지 감청 을 썼 습 니 다.그러면 적어도 한 가지 가 실 행 될 것 입 니 다.다른 더 좋 은 방법 이 있 을 지 모 르 지만,이곳 의 중점 은 아니다.물론 여러분 의 가르침 도 환영 합 니 다.
코드 부분 에 대해 jQuery 를 사 용 했 습 니 다.사실 사용 하지 않 아 도 괜 찮 습 니 다.애니메이션 의 미끄럼 과 감청 은 모두 순수한 js 로 쓸 수 있 습 니 다.그러나 이것 은 이곳 의 중점 이 아니 기 때문에 왜 jQuery 를 사용 하지 않 습 니까?성공 자 는 거인 의 어깨 위 에 서 있 고 우리 도 jQuery 가 잘 쓰 지 못 했다.・`ω´・)
2015/11/13 업데이트
한 학생 은 코드 가 QQ 모 바 일 브 라 우 저 와 Opera 모 바 일 브 라 우 저 등에 서 미 끄 러 지 는 효과 가 없다 며 댓 글 에 나 오 는 이 유 를 찾 아 보 았 다.그래서 댓 글 에 나 오 는 힌트 와 그 친구 의 한 신 학생 의 힌트 에 따라 수정 했다.주로 touch move 이벤트 에서 가로 좌표 의 변위 에 따라 기본 사건 을 막 을 지 여 부 를 판단 합 니 다.다음 과 같 습 니 다.

//           ,      
if (Math.abs(delta.x) > Math.abs(delta.y)) {
  event.preventDefault();
}
2016/02/25 업데이트
qq_25558115 학생 은"한 가지 기록 만 더 제공 할 수 있다 면 왼쪽으로 미 끄 러 질 수 있 고 다른 기록 이 미 끄 러 지면 왼쪽 미끄럼 기록 이 있 는 사람 은 제자리 로 돌아 가 야 한다"고 말 했다.그래서 간단하게 이 루어 졌 다.주요 사고방식 은 다음 과 같다.

//                
var lastLeftObj;

//         ,              ,   ,           ,     
//   ,        
//       ,          
if (  ) {
  pressedObj  
  lastLeftObj && lastLeftObj != pressedObj && lastLeftObj  
  lastLeftObj = pressedObj; //           
} else if (  ) {
  pressedObj  
  lastLeftObj = null; //           
}

2016/09/06 업데이트
마 찬 발 학생 이 제기 한 bug 에 따라 수정 합 니 다.
오른쪽으로 미 끄 러 질 때 판단 합 니 다.오른쪽 미 끄 러 질 대상(pressed Obj)이 지난번 왼쪽 미 끄 러 진 대상(last Left Obj)일 때 만 대상 을 오른쪽으로 미 끄 러 뜨리 고 last Left Obj 를 비 웁 니 다.

if (pressedObj == lastLeftObj) {...}
girlyogo 학생 의 제안 에 따라"본 줄 을 제외 한 다른 지역 에서 클릭 할 때 현재 왼쪽 슬라이더 단 추 를 복원 합 니 다"기능 을 추가 합 니 다.미끄럼 이 끝 날 때 pressed Obj 를 판정 합 니 다!=lastLeft Obj,즉 클릭/슬라이딩 대상 이 다른 대상 임 을 알 수 있 습 니 다.

//                   
if (lastLeftObj && pressedObj != lastLeftObj) {
  $(lastLeftObj).animate({marginLeft:"0"}, 500); //   
  lastLeftObj = null; //           
}
실제로 상기 기능 을 추가 한 후 앞에서 언급 한 bug 는 존재 하지 않 습 니 다.하지만 bug 를 제거 하 는 코드 가 남아 있 습 니 다.
업 데 이 트 된 전체 코드 는 다음 과 같 습 니 다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>        ,    </title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
  //         =    +    
  $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
  //           =    
  $(".line-normal-wrapper").width($(".line-wrapper").width());
  //         (              ...)
  $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);

  //      ,        
  var lines = $(".line-normal-wrapper");
  var len = lines.length; 
  var lastX, lastXForMobile;

  //           
  var pressedObj; //        
  var lastLeftObj; //         

  //         
  var start;

  //             
  for (var i = 0; i < len; ++i) {
    lines[i].addEventListener('touchstart', function(e){
      lastXForMobile = e.changedTouches[0].pageX;
      pressedObj = this; //          

      //          
      var touches = event.touches[0];
      start = { 
        x: touches.pageX, //    
        y: touches.pageY //    
      };
    });

    lines[i].addEventListener('touchmove',function(e){
      //        x y    
      var touches = event.touches[0];
      delta = {
        x: touches.pageX - start.x,
        y: touches.pageY - start.y
      };

      //           ,      
      if (Math.abs(delta.x) > Math.abs(delta.y)) {
        event.preventDefault();
      }
    });

    lines[i].addEventListener('touchend', function(e){
      if (lastLeftObj && pressedObj != lastLeftObj) { //                   
        $(lastLeftObj).animate({marginLeft:"0"}, 500); //   
        lastLeftObj = null; //           
      }
      var diffX = e.changedTouches[0].pageX - lastXForMobile;
      if (diffX < -150) {
        $(pressedObj).animate({marginLeft:"-132px"}, 500); //   
        lastLeftObj && lastLeftObj != pressedObj && 
          $(lastLeftObj).animate({marginLeft:"0"}, 500); //            
        lastLeftObj = pressedObj; //           
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); //   
        lastLeftObj = null; //           
       }
      }
    });
  }

  //    PC          
  for (var i = 0; i < len; ++i) {
    $(lines[i]).bind('mousedown', function(e){
      lastX = e.clientX;
      pressedObj = this; //         
    });

    $(lines[i]).bind('mouseup', function(e){
      if (lastLeftObj && pressedObj != lastLeftObj) { //                   
        $(lastLeftObj).animate({marginLeft:"0"}, 500); //   
        lastLeftObj = null; //           
      }
      var diffX = e.clientX - lastX;
      if (diffX < -150) {
        $(pressedObj).animate({marginLeft:"-132px"}, 500); //   
        lastLeftObj && lastLeftObj != pressedObj && 
          $(lastLeftObj).animate({marginLeft:"0"}, 500); //            
        lastLeftObj = pressedObj; //           
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); //   
        lastLeftObj = null; //           
       }
      }
    });
  }
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
.line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; }
.line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; }
.line-btn-delete { float: left; width: 132px; height: 144px; }
.line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; }
.line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; }
.line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; }
.line-normal-icon-wrapper img { width: 120px; height: 120px; }
.line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; }
.line-normal-avatar-wrapper img { width: 92px; height: 92px; border-radius: 60px; }
.line-normal-left-wrapper { float: left; overflow: hidden; }
.line-normal-info-wrapper { float: left; margin-left: 10px; }
.line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }
.line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }
.line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }
</style>
</head>
<body>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="1.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">    </div>
     <div class="line-normal-msg">            </div>
     <div class="line-normal-time">1   </div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="5.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>  </button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="2.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">  </div>
     <div class="line-normal-msg">      </div>
     <div class="line-normal-time">1   </div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="6.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>  </button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="3.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">    </div>
     <div class="line-normal-msg">           ,          ,     ,      ,         </div>
     <div class="line-normal-time">1   </div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="7.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>  </button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="4.png" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">   </div>
     <div class="line-normal-msg">     ……          ~   ……</div>
     <div class="line-normal-time">1   </div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="8.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>  </button></div>
 </div>
</div>
</body>
</html>

총결산
코드 가 거 칠 고 bug 가 많 으 며 절대적 이지 않 은 곳 도 있 습 니 다.예 를 들 어 내 가 눌 렀 을 때 첫 번 째 기록 이 었 고 들 었 을 때 두 번 째 기록 이 었 다.그러면 이때 미끄럼 은 첫 번 째 기록 이 될 것 이다.그러나 이것 은 구체 적 인 수 요 를 볼 때 미 끄 러 지 는 대상 이 눌 렀 을 때의 대상 을 기준 으로 해 야 한다 고 생각한다 면 어디서 들 어도 눌 렀 을 때의 대상 을 미 끄 러 뜨 린 다.미 끄 러 지 는 대상 이 들 어 올 릴 때의 대상 이 라 고 생각한다 면 그것 도 괜 찮 습 니 다.아니면 누 르 고 들 어 올 릴 때 같은 대상 이 아니 라 고 생각 하 시 면 미 끄 러 지지 않 아 도 됩 니 다.아무튼 수요 에 따라.
원본 코드 도장:원본 코드 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기