모바일 단말에서 풀업, 슬라이드다운을 구현하는 JS 기능 소개

손가락으로 화면을 터치하고, 터치스타트와 터치엔드를 사용하여 앞뒤로 미끄러지는 거리를 계산하고, 위로 당겨지는지 아래로 미끄러지는지 확인하세요. 다음으로는 예제 코드를 통해 js 모바일 단말기의 풀업과 슬라이드다운 기능을 소개하겠습니다. 관심 있는 친구들은 함께 살펴보세요. 1. 손가락으로 화면을 터치하고 터치스타트와 터치엔드를 사용해 계산합니다. 앞뒤 슬라이딩 거리를 측정하여 풀업인지 슬라이드다운인지 판단합니다.

2. js의 거리 차이: pageY, clientY, offsetY:

                                                                                                                        .

ClientY: 브라우저에 따라 스크롤 휠 거리는 포함되지 않습니다.

   pageY: 이 예에서는 휠의 스크롤 거리가 포함됩니다. pageY는 화면을 터치할 때 -startY 위치를 기록하고 종료할 때 -endY를 빼서 여부를 결정합니다. 위 또는 아래로 이동합니다.

3. touchstart에는 touches 속성이 있고, touchend에는 selectedTouches 속성이 있으며, 두 속성에는 각각 pageY 및 pageX 정보가 포함되어 있습니다.

//滑动处理 
    var startX, startY; 
    document.addEventListener('touchstart',function (ev) { 
      startX = ev.touches[0].pageX; 
      startY = ev.touches[0].pageY; 
    }, false); 
    document.addEventListener('touchend',function (ev) { 
      var endX, endY; 
      endX = ev.changedTouches[0].pageX; 
      endY = ev.changedTouches[0].pageY; 
      var direction = GetSlideDirection(startX, startY, endX, endY); 
      switch(direction) { 
        case 0: 
            alert("无操作"); 
          break; 
        case 1: 
          // 向上 
          alert("up"); 
          break; 
        case 2: 
          // 向下 
          alert("down"); 
          break; 
 
        default: 
      } 
    }, false);

넷,

function GetSlideDirection(startX, startY, endX, endY) { 
      var dy = startY - endY; 
      //var dx = endX - startX; 
      var result = 0; 
      if(dy>0) {//向上滑动 
        result=1; 
      }else if(dy<0){//向下滑动 
        result=2; 
      } 
      else 
      { 
        result=0; 
      } 
      return result; 
    }

위 내용은 모바일 단말에서 풀업, 슬라이드다운을 구현하는 JS 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!