使用Vanilla 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>

设计很像[手机上的Tinder应用程序]。 以下是jquery实现的一些链接：

Tinder Animation

Swipe Cards

如何使用纯JavaScript执行此操作？

Answer 1

您想在某个开始位置捕获鼠标坐标，然后捕获onmousemove事件以获取新坐标。查看差异向量（可能首先将其转换为极坐标）以确定它是否移动到足以触发另一个动作。