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

使用方法:

<script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script>

<span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化
<span class="keyword" style="font-weight: bold;">var hammer = new Hammer(document.getElementById("container"span>)); <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可
hammer.ondragstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动
hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中
hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束
hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动 hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击
hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击
hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按 hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始
hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中
hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束 hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕

还支持jQuery插件的形式调用

<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>

$("#element")
.hammer({
// 对DOM进行一些初始化,这里可以加入一些参数
})
.bind("tap", function(ev) {
console.log(ev);
});

多点触控插件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. My way to Python - Day03

    列表和字典的赋值 dict1 = {} dict1['k1'] = 'v1' list1 = [] list1.append('v1') 集合系列 1,计数器 Python 2.7.6 (defaul ...

  2. ext.net中ComboBox空间实现模糊查询

    ComboBox中的属性添加Mode="Local"可以实现第一个字的模糊查询但是搜索中间的字无法实现 现提供一下方法使用正则表达式实现全模糊查询 <ext:ComboBox ...

  3. 简单的拖动手势控制侧拉view显示

    通过 UIPanGestureRecognizer  手势来控制侧拉view的显示 在QHLViewController.m文件中,先添加一些宏定义和参数等等. #define QHLAnimatin ...

  4. WCF入门教程系列三

    一.WCF服务应用程序与WCF服务库 我们在平时开发的过程中常用的项目类型有“WCF 服务应用程序”和“WCF服务库”. WCF服务应用程序,是一个可以执行的程序,它有独立的进程,WCF服务类契约的定 ...

  5. c++设计模式之状态模式

    一. 状态模式 定义:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. 实现方式1: workstate 状态抽象类 workstate1 状态实现类1 workstate2 ...

  6. Nvidia CUDA 6 Installed In Ubuntu 12.04

    环境:ubuntu 12.04 (x64) 如果不能够 service lightdm stop,显示:unknown service 或者其他的 sudo /etc/init.d/lightdm r ...

  7. im2uint8函数分析

    环境:Win7 64位 + Matlab R2010a 本次分析的函数为im2uint8,这个函数在图像处理中要用到,主要把图像数据类转换到uint8 uint8函数有效的输入的图像数据类为:logi ...

  8. (原)caffe在ubuntu中设置GPU的ID号及使用多个GPU

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5884892.html 参考网址: http://caffe.berkeleyvision.org/tu ...

  9. Js中单引号和双引号的区别

    <html> <body> <input value="外双引号内双引号-错误" type="button" onclick=&q ...

  10. [C++程序设计]全局,局部变量

    在函数声明中出现的参数名,其作用范围只在 本行的括号内.实际上,编译系统对函数声明中的 变量名是忽略的,即使在调用函数时也没有为它们 分配存储单元.例如 int max(int a,int b); ┆ ...