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

标签 javascript jquery css html

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

用户点击进入网站,就会看到与某个元素相关的图片。他们按左箭头键,图片将被丢弃,或者他们按右箭头键,图片(和元素)将被保存。

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

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

最佳答案

您想要按键监听器: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/

关于javascript - 如何制作类似Tinder的浏览器效果,即 "swipe"使用方向键左右通过一系列卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23450927/

相关文章:

Jquery 多选插件 - 打印 div 中的选定内容

jQuery slide 在 Chrome 中无法正常工作,但在 Firefox 上没问题

html - 如何设置文字颜色?

javascript - 帮助减少 document.getelementbyid dom 调用或重写算法

javascript - TransitionEnd 监听器在子元素上触发

javascript - 如何创建CAF接收器?

javascript - 如何在用户想要选择一个选项后增加/减少 'select' 选项宽度

css - 如何防止大字体在 Chrome (OSX) 中看起来呈锯齿状?

html - Bootstrap定位问题

javascript - DocumentDB REST API 与 Postman 输出始终为 "Unauthorized"错误