바닐라 자바 ​​스크립트를 사용하여 마우스 이벤트를 사용하여 오른쪽/왼쪽 이미지 이동/스 와이프

Question

나는 이미지가 있습니다. 마우스 포인터를 왼쪽으로 이동하면 스택에 다음 이미지가 표시됩니다. 마우스를 오른쪽으로 움직이면 다른 페이지로 이동합니다.

JSFiddle demo

<div class="container"> 
    <div class="image1 image"></div> 
    <div class="image2 image"></div> 
    <div class="image3 image"></div> 
    <div class="image4 image"></div> 
    <div class="image5 image"></div> 
</div> 

디자인은 훨씬 [전화에 부싯깃 응용 프로그램]과 같다. 여기가 JQuery와에 의해 달성되는 몇 가지 링크가 있습니다 :

Tinder Animation

Swipe Cards

가 어떻게 순수 자바 스크립트를 사용하여이 작업을 수행 할 수 있습니까?

Answer 1

일부 시작 위치에서 마우스 좌표를 캡처 한 다음 onmousemove 이벤트를 캡처하여 새 좌표를 얻으려고합니다. 차이 벡터를보고 (아마 극좌표로 변환하여) 다른 동작을 트리거하기에 충분히 멀리 움직 였는지 여부를 결정하십시오.