官网:

http://hammerjs.github.io/   hammer.js 官网

http://hammerjs.github.io/api/  官网API(官网写的实在太简了!不好用。注意里面关键字,另外还得搜索引擎查相关文章)  2015-12-9

下载:

http://hammerjs.github.io/dist/hammer.js

http://hammerjs.github.io/dist/hammer.min.js   下载hammer.js   v2.0.4  2015-11-13

文章:

http://www.cnblogs.com/iamlilinfeng/p/4239957.html   教程及示例:移动端脚本框架,他可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架  下载教程DEMO源码

http://hammerjs.github.io/getting-started/  2015-11-20

http://www.awesomes.cn/repo/hammerjs/hammer-js  关于hammer的一些介绍和下载  2015-12-9

http://www.tuicool.com/articles/VNRjym7   移动端手势库hammerJS 2.0.4官方文档翻译(重要! swipeup 和swipedown无效的问题是参考此文解决的)  2015-12-9

http://www.cnblogs.com/aaronjs/p/4024819.html   移动开发框架剖析(一) Hammer专业的手势控制  2015-12-9

http://www.cnblogs.com/aaronjs/p/4029304.html   移动开发框架剖析(二) Hammer专业的手势控制  2015-12-9


1、Pan事件:(事件:触屏中的拖动)

  在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件。这个事件在屏触开发中比较常用,如:左拖动、右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理:
  pan:拖动
  panleft:向左拖动
  panright:向右拖动
  panup:向上拖动
  pandown:向下拖动

  panstart:拖动开始
  panmove:拖动过程
  panend:拖动结束
  pancancel:拖动取消

2、Pinch事件:(事件:捏合等)
  在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件。该事件事以分别对以下事件进行监听并处理:
  pinchstart:多点触控开始
  pinchmove:多点触控过程
  pinchend:多点触控结束
  pinchcancel:多点触控取消
  pinchin:多点触控时两手指距离越来越近
  pinchout:多点触控时两手指距离越来越远

3、Press事件:(事件:长按)
  在指定的dom区域内触屏版本的点击事件,这个事件相当于PC端的Click事件,该不能包含任何的移动,最小按压时间为500毫秒,常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理:
  Pressup:点击事件离开时触发

4、Rotate事件:(事件:两个手指旋转)
  在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样)。该事件分别对以下事件进行监听并处理:
  rotatestart:旋转开始
  rotatemove:旋转过程
  rotateend:旋转结束
  rotatecancel:旋转取消

5、Swipe事件:(事件:滑动。————向左、向右、向上、向下)
  在指定的dom区域内,一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。
  swipe:滑动
  swipeleft:向左滑动
  swiperight:向右滑动
  swipeup:向上滑动  (注意:默认写法,左右滑动有效,但上下滑动时,会出现swipeup和swipedown无效的问题。所以要加下面代码!)2015-12-9
  swipedown:向下滑动

var hammertime = new Hammer(document.getElementById("test"));
//若要允许识别器识别垂直方位或全部方位的 pan 和 swipe,可以加这两句:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL});  //DIRECTION_VERTICAL:放开up down事件  DIRECTION_HORIZONTAL:放开left right事件
hammertime.on("swipe", function (e) {
console.log("swipe : X偏移:"+e.deltaX+", Y偏移:"+ e.deltaY);
});

6、Tap事件:(事件:触屏点击)
  在指定的dom区域内,一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒,如果超过250毫秒则按Press事件进行处理。


来源于:http://hammerjs.github.io/api/

Name         Value
type             事件的名称,比如 panstart
deltaX          X坐标轴上的移动距离
deltaY          Y坐标轴上的移动距离
deltaTime         交互过程的总时长(毫秒)
distance        移动距离
angle          移动角度
velocityX       在X坐标轴上的移动速率,单位为px/ms
velocityY       在Y坐标轴上的移动速率,单位为px/ms
velocity         X/Y上最高的速率值
direction           移动方位,匹配 DIRECTION 常量
offsetDirection      从起始点算起的移动方位。匹配DIRECTION常量
scale            多点触摸结束时的缩放比例,若为单点触摸则为1
rotation        多点触摸结束时的缩放比例,若为单点触摸则为0
center          多点触摸的中心位置,或者单点的坐标————(用到)
srcEvent       源事件对象,类型为TouchEvent,MouseEvent或PointerEvent.
target           接收事件的目标
pointerType      基本的指针类型,可以为touch,mouse,pen,或kinect
eventType        事件类型,匹配INPUT常量
isFirst        true 表示当前交互为首次交互
isFinal         true 表示当前交互为最后一次交互
pointers            由指针类型组成的数组,包含了最终指针类型(touchend,mouseup)
changedPointers    由new/moved/lost 指针类型组成的数组
preventDefault    参考srcEvent.preventDefault()方法。主要给熟手使用的


事件:

Hammer.on(window, "load resize scroll", function(ev) {
console.log(ev.type);
});

..

插件: Hammer.js的更多相关文章

  1. 多点触控插件Hammer.js

    插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. 使用方法: <script src=<span class ...

  2. Js 之常见手势操作插件 Hammer.js

    一.下载 链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A提取码:ldqy 二.案例 三.代码 <!DOCTYPE html> < ...

  3. 代码笔记-触摸事件插件hammer.js使用

    如果要使用jquery,则需要下载jquery.hammer.min.js版本 新建一个hammer对象生成的对象是dom对象,不能直接使用jqeury 的  $(this)方法,需要先将其转成jqu ...

  4. Hammer.js 移动端手势库,多点触控插件

    jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer ...

  5. 移动端手势事件 hammer.JS插件

                      一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http ...

  6. Hammer.js分析(一)——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...

  7. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  8. 移动开发框架,Hammer.js&nbsp;移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.t ...

  9. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

随机推荐

  1. 如何在Linux上清理内存缓存、缓冲与交换空间

    如何在Linux上清理内存缓存.缓冲与交换空间 与其他类型的操作系统一样,GNU/Linux已经有效的实现了内存管理,甚至更加优秀.但是如果任何进程正在吃光你的内存,并且你想清理它,Linux提供了一 ...

  2. 面向对象编程其实很简单--python面向对象(初级篇)

    出处:http://www.cnblogs.com/wupeiqi/ 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函 ...

  3. Mysql 复制一个新表

    1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable;来 ...

  4. SQL-存储过程-010

    什么是存储过程? 可以理解为数据库中的方法,与C#中的方法一样,具有参数和返回值: 存储过程的优点? 提高运行速度:存储过程在创造是进行编译,以后运行存储过程都不需要再进行编译,极大化的提高了数据库的 ...

  5. Go Example--格式化字符串

    package main import ( "fmt" "os" ) type point struct { x, y int } func main() { ...

  6. JDBC执行SQL语句以及Date对象和字符串之间的相互转换(关键是那张标准表)

    只要能分隔数字就行,老外没有11月这个概念 以前看见被人这么写,你觉得可以写成yyYY这样吗,可以mm这样吗,可以mM这样吗,不要有这种想法 都是大神们都写好了,只需要参考手册,然后调用API就行了 ...

  7. websocket 11

    1. websocket 回顾: - 什么是轮训? - 通过定时器让程序每隔n秒执行一次操作. - 什么是长轮训? - 浏览器向后端发起请求,后端会将请求 hang 住,最多hang 30s. 如果一 ...

  8. because there was insufficient free space available after evicting expired cache entries

    Tomcat运行的时候哗哗哗的报警告 版本是Tomcat 8.5.15 告警信息关键字如下 because there was insufficient free space available af ...

  9. 快速部署私人git服务--基于docker化Gogs

    Gogs 一款极易搭建的自助 Git 服务. 环境 Linux系统 docker 获取gogs镜像,并运行, docker run -it --: -p : -v /var/gogs:/data go ...

  10. mysql 启动失败,数据恢复

    mysql 启动失败,数据恢复 2017年02月13日 16:46:36 阅读数:621 Forcing InnoDB Recovery提供了6个等级的修复模式,需要注意的是值大于3的时候,会对数据文 ...