js 移动开发框架:Hammer.js 移动设备触摸手势js库

hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档。

使用方法:

1

2

3

4

5

6

7

8

9

10

扫描二维码关注公众号,回复: 8831393 查看本文章

11

12

13

14

15

16

17

18

19

20

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

// 先要对监听的DOM进行一些初始化

var hammer = new Hammer(document.getElementById("container"));

// 然后加入相应的回调函数即可

hammer.ondragstart = function(ev) { };  // 开始拖动

hammer.ondrag = function(ev) { }; // 拖动中

hammer.ondragend = function(ev) { }; // 拖动结束

hammer.onswipe = function(ev) { }; // 滑动

hammer.ontap = function(ev) { }; // 单击

hammer.ondoubletap = function(ev) { }; //双击

hammer.onhold = function(ev) { }; // 长按

hammer.ontransformstart = function(ev) { }; // 双指收张开始

hammer.ontransform = function(ev) { }; // 双指收张中

hammer.ontransformend = function(ev) { }; // 双指收张结束

hammer.onrelease = function(ev) { }; // 手指离开屏幕

还支持jQuery插件的形式调用

1

2

3

4

5

6

7

8

9

<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>

$("#element")

   .hammer({

        // 对DOM进行一些初始化,这里可以加入一些参数

   })

   .bind("tap", function(ev) {

        console.log(ev);

   });

官网地址:http://eightmedia.github.com/hammer.js/  (带演示)
源码地址:https://github.com/EightMedia/hammer.js

文件大小: 23K(源码)、6K(minified)

还有个flipsnap框架和hammer差不多

发布了139 篇原创文章 · 获赞 8 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_37003559/article/details/103907950