使用香草鼠標事件左右移動/滑動圖像Javascript

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

我怎樣才能做到這一點與純JavaScript？

Answer 1

您想要在某個起始位置捕獲鼠標座標，然後捕獲onmousemove事件以獲取新座標。查看差異矢量（可能首先將其轉換爲極座標），以確定它是否移動得足夠遠以觸發另一個操作。