使用香草鼠标事件左右移动/滑动图像Javascript

问题描述：

我有一堆图像。当我将鼠标指针移到左侧时，它应该显示堆栈中的下一个图像。当我将鼠标移到右侧时，应该带我到另一页。使用香草鼠标事件左右移动/滑动图像Javascript

的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？

https://jsfiddle.net/aqp7xdu0/ –

重写并添加相关的JSFiddle演示从评论Q. – kayess

你想左/右拖动卡或只是悬停在图像的左侧部分？ –

答

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

使用香草鼠标事件左右移动/滑动图像Javascript

相关推荐