插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

使用方法:

  1. <script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script>
  2.  
  3. <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化
  4. <span class="keyword" style="font-weight: bold;">var hammer = new Hammer(document.getElementById("container"span>));
  5.  
  6. <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可
  7. hammer.ondragstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动
  8. hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中
  9. hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束
  10. hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动
  11.  
  12. hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击
  13. hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击
  14. hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按
  15.  
  16. hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始
  17. hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中
  18. hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束
  19.  
  20. hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕

还支持jQuery插件的形式调用

  1. <span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>span>
  2.  
  3. $("#element")
  4. .hammer({
  5. // 对DOM进行一些初始化,这里可以加入一些参数
  6. })
  7. .bind("tap", function(ev) {
  8. console.log(ev);
  9. });

多点触控插件Hammer.js的更多相关文章

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

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

  2. wex5 实战 手指触屏插件 hammer的集成与优劣

    前言 前几天,给客户做了一个图片点击放大,很简单,客户说能不能双手指缩放图片呢? 想到了hammer,不管好用不好用,总得试. 网上居然没有像样的中文文档和成熟案例,有的文写的鬼都看不懂.还是自已动手 ...

  3. 插件: Hammer.js

    官网: http://hammerjs.github.io/  hammer.js 官网 http://hammerjs.github.io/api/ 官网API(官网写的实在太简了!不好用.注意里面 ...

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

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

  5. [示例] Firemonkey OnTouch 多点触控应用

    说明:Firemonkey OnTouch 多点触控应用,可同时多指移动多个不同控件 原码下载:[原创]TestMultitouchMove_多点触控应用_by_Aone.zip 运行展示:

  6. ccc 多点触控2

    经过不断的思考发现,如果是两个sprite都添加触控的时候,往往直接成单点触控, 但是如果是两个node的时候在node上面点击就会变成多点触控的形式 cc.Class({ extends: cc.C ...

  7. ccc 多点触控

    研究了一天,多点触控的点无法保存,只能模拟多点触控了 cc.Class({ extends: cc.Component, properties: { wheelStick:{ default:null ...

  8. Cocos2dx 多点触控

    1 最容易忽略的东西,对于ios平台,须得设置glView的属性: [__glView setMultipleTouchEnabled:YES]; 2 如果调用CCLayer的方法setTouchEn ...

  9. Android 多点触控与简单手势(一)

    现在一般的Android手机都会使用电容触摸屏最少可以支持两点触摸,多的可能是七八个,所以基本上都会支持多点触控, android系统中应用程序可以使用多点触控的事件来完成各种手势和场景需求. And ...

随机推荐

  1. [Regular Expressions] Match the Start and End of a Line

    We can use: ^: match the beginning $: match the end Let's say we have the string like the following: ...

  2. Android应用切换皮肤功能实现

    原文地址:http://www.eoeandroid.com/thread-318159-1-1.html 现在大多数android应用都支持切换皮肤的功能.比如千千静听,墨迹天气等等.本文介绍两种切 ...

  3. SQL-SERVER2008登录错误233

    问题 : SQL Server2008在本地使用Windows身份验证登录或是使用SQL Server身份认证登录时报错:已成功与服务器建立连接,但是在登录过程中发生错取.(provider:共享内存 ...

  4. linux 系统下配置安装 java jdk 图文流程

    先查看一下系统版本,本例采用的操作系统是CentOS 6.5: 如果你是初装之后的操作系统,那么有可能wget这个组件是不存在的,所以你要安装一下它,这样才可以让你从网上down下你要的安装包: 上面 ...

  5. HTML与CSS入门——第二章 发布Web内容

    知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...

  6. cookie丢失、登陆自动退出问题解决

    cookie保存在客户端或者内存中,不易丢失.但是在某些情况下会被忽略.在项目过程中遇到过跨域丢失的情况.在VS里面运行的程序,产生的cookie默认是没有domain值的,但是给它设定domain值 ...

  7. @synthesize

    @synthesize 相当于把属性当成成员变量来用,不用再写self.属性@synthesize myButton; 这样写了之后,那么编译器会自动生成myButton的实例变量,以及相应的gett ...

  8. TCP 和 UDP 协议发送数据包的大小 (转载)

    MTU最大传输单元,这个最大传输单元实际上和链路层协议有着密切的关系,EthernetII帧的结构DMAC+SMAC+Type+Data+CRC由于以太网传输电气方面的限制,每个以太网帧都有最小的大小 ...

  9. OpenCV——Rect矩阵类

    成员变量x.y.width.height,分别为左上角点的坐标和矩形的宽和高. 常用的成员函数有: Size()返回值为一个Size area()返回矩形的面积 contains(Point)用来判断 ...

  10. (转) 学习C++ -> 向量(vector)

      vector是向量类型,它是一种对象实体,具有值,所以可以看作是变量. 它可以容纳许多其他类型的相同实体,如若干个整数,所以称其为容器.   vector类与一般的Array类的区别在于:   1 ...