javascript - 使用 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 事件以获得新坐标。查看差异向量(可能先将其转换为极坐标)以确定它是否移动得足够远以触发另一个 Action 。