javascript - 如何通过一系列卡片制作类似Tinder的浏览器效果，即 "swipe"左右使用方向键？

Question

我在哪里可以找到一个库/什么是实现以下内容的好方法:

用户点击进入该网站，并看到与某项相关的图片。他们按下左箭头键，图片被丢弃，或者他们按下右箭头键，图片(和元素)被保存。

然后会弹出另一张照片供他们决定。

有点像 Tinder，但在浏览器中，并且使用箭头键而不是滑动。谢谢!

Answer 1

您需要按键监听器:Detecting arrow key presses in JavaScript

然后是动画库。您可以简单地使用 jquery 的 animate(), ( http://www.w3schools.com/jquery/eff_animate.asp )，它基本上允许您更改 css 属性并告诉它您希望它从一个位置移动到下一个位置需要多长时间，例如:

$("img").animate({left-margin: $(window).width()}, 3000);

需要 3 秒才能将您的图像从其位置一直移动到屏幕之外。

如果您想要更高级的东西，您可以在此列表中找到一些可能适合您的动画库，但其中一些将比您需要的更重:http://www.jquery4u.com/animation/10-super-javascript-animation-frameworks/