简介
Hammer.js
是一个支持多点触摸的JavaScript库,可以轻松实现触控手势操作。通过使用Hammer.js
可不需要额外的JS代码就可以支持tap
,swipe
,pinch
等常见的手势。
安装
通过npm安装 hammerjs
:
--- ------- -------- ------
引入Hammer.js到你的项目中
--- ------ - --------------------
常见手势
tap
最简单的手势,单击一个元素两次或按下某个键来触发。例如:
--- ---------- - -------------------------------------- --- --- - --- ------------------- ------------- -------- -- - ------------- ---
或者你可以在选项中传递指定的次数来自定义单击次数:
--- --------- - --- -------------------------------------------- - ----- - --- --- --------- - --- -------------------------------------------- - ----- - ---
swipe
轻打并滑动一个元素来触发。例如:
--- ------------ - ---------------------------------------- --- ----- - --- --------------------- ----------------- ---------- - --------------- ---
你可以在选项中传递偏移量来定义最短滑动距离和方向:
--- ----- - --- ---------------------------------------- - ---------- ----------------------- --------- --- --- ----------------- ---------- - ------------------- -------- ---
pinch
对于如缩小和放大等手势相对于触控屏幕上的屏幕大小的元素尺寸进行改变。例如:
--- ------------ - ---------------------------------------- --- ----- - --- --------------------- --- ----- - -- ------------------------ ------- ---- --- ----------------- ----------- - ---------------------------- - -------- - ------ - -------- - ---- ---
rotate
指针绕视图的中心以一个特定的角度旋转元素。例如:
--- ------------- - ----------------------------------------- --- ------ - --- ---------------------- -------------------------- ------- ---- --- --- ----- - -- ------------------- ----------- - ----------------------------- - --------- - ------ - ----------- - ------- ---
讨论
通过学习Hammer.js
你可以快速实现一些手势的交互,同时也可以通过对样例的了解来深入理解什么是多点触控以及怎样实现基于多点触控的事件和交互。多练几个示例,你将能够创建精美的UI,并实现无缝的用户体验。
结论
Hammer.js
是支持触控手势的轻量级Library,它提供了一个易用的API,使你可以轻松地为你的网站或Web应用程序添加手势交互。同时,由于它的灵活性和可定制性,你可以通过简单的API自定义更多样式的交互体验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/57729