집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 단일 페이지에서 제스처 슬라이딩 화면 전환을 구현하는 방법

HTML5 단일 페이지에서 제스처 슬라이딩 화면 전환을 구현하는 방법

php中世界最好的语言원래의: 2018-01-12 09:56:373418검색

이번에는 HTML5 단일 페이지에서 제스처 슬라이딩 화면 전환을 구현하는 방법을 보여 드리겠습니다. HTML5 단일 페이지에서 제스처 슬라이딩 화면 전환 시 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

H5 단일 페이지 제스처 슬라이딩 화면 전환은 HTML5 터치 이벤트(터치)와 CSS3 애니메이션(Transform, Transition)

1을 사용하여 구현됩니다. 구현 원리

5개의 페이지가 있고 각 페이지가 100%를 차지한다고 가정합니다. 화면 % 너비, DIV 컨테이너 뷰포트를 만들고 너비(너비)를 500%로 설정한 다음 5페이지를 컨테이너에 로드하고 이 5페이지가 전체 컨테이너를 동일하게 나누고 마지막으로 컨테이너의 기본 위치를 0으로 설정합니다. , 오버플로가 숨김으로 설정되어 기본적으로 화면에 첫 번째 페이지가 표시됩니다.

<div id="viewport" class="viewport">
    <div class="pageview" style="background: #3b76c0" >
        <h3 >页面-1</h3>
    </div>
    <div class="pageview" style="background: #58c03b;">
        <h3>页面-2</h3>
    </div>
    <div class="pageview" style="background: #c03b25;">
        <h3>页面-3</h3>
    </div>
    <div class="pageview" style="background: #e0a718;">
        <h3>页面-4</h3>
    </div>
    <div class="pageview" style="background: #c03eac;">
        <h3>页面-5</h3>
    </div>
</div>

CSS 스타일:

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

터치스타트, 터치무브, 터치엔드 이벤트를 등록하세요. 화면에서 손가락이 미끄러질 때 CSS3 변환을 사용하여 뷰포트의 위치를 실시간으로 설정하세요. viewport 변환:translate3d(100%,0,0)이면 충분합니다. 여기서는translateX대신에translate3d를 사용합니다.translate3d는 휴대폰 GPU를 적극적으로 켜서 렌더링을 가속화하여 페이지 슬라이드를 더 부드럽게 만듭니다.

2. 주요 아이디어

화면에 손가락을 대고 슬라이딩한 후 화면을 떠나는 완전한 작업 프로세스입니다. 해당 작업은 다음 이벤트를 트리거합니다.

화면에 손가락을 대면 ontouchstart.

화면에서 슬라이딩하는 손가락: ontouchmove

손가락이 화면에서 나가기: ontouchend

페이지 슬라이딩을 완료하려면 터치 이벤트의 세 단계를 캡처해야 합니다.

ontouchstart: 변수 초기화, 위치 기록 손가락, 현재 시간 기록

/*手指放在屏幕上*/
document.addEventListener("touchstart",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   startX = touch.pageX;
   startY = touch.pageY;
   initialPos = currentPosition;   //本次滑动前的初始位置
   viewport.style.webkitTransition = ""; //取消动画效果
   startT = new Date().getTime(); //记录手指按下的开始时间
   isMove = false; //是否产生滑动
}.bind(this),false);

ontouchmove : 현재 위치를 가져와서 화면에서 손가락 움직임의 차이 deltaX를 계산하고 그에 따라 페이지를 이동시킵니다

/*手指在屏幕上滑动，页面跟随手指移动*/
document.addEventListener("touchmove",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   var deltaX = touch.pageX - startX;
   var deltaY = touch.pageY - startY;
   //如果X方向上的位移大于Y方向，则认为是左右滑动
   if (Math.abs(deltaX) > Math.abs(deltaY)){
       moveLength = deltaX;
       var translate = initialPos + deltaX; //当前需要移动到的位置
       //如果translate>0 或 < maxWidth,则表示页面超出边界
       if (translate <=0 && translate >= maxWidth){
           //移动页面
           this.transform.call(viewport,translate);
           isMove = true;
       }
       direction = deltaX>0?"right":"left"; //判断手指滑动的方向
   }
}.bind(this),false);

이 방법을 마스터하신 것 같습니다. 이 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!