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

使用方法:

http://eightmedia.github.com/hammer.js/hammer.js

">

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

var hammer=new Hammer(document.getElementById_x("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插件的形式调

http://eightmedia.github.com/hammer.js/jquery.hammer.js

">

$("#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)

转自:http://www.cnblogs.com/zhwl/p/3525238.html

移动开发框架,Hammer.js 移动设备触摸手势js库的更多相关文章

  1. 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库

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

  2. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  3. ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  4. 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库

    毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库 在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或 ...

  5. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  6. JS判断移动设备最佳方法 并实现跳转至手机版网页

    我在开发的Magento或Wordpress主题时,通过都会制作手机版本,为了实现某个片段在手机端和桌面端不同功能,又或者如果是手机设备,就跳转到指定的网页上,那么这里就需要用到JS来做判断了,下面有 ...

  7. JS判断移动设备最佳方法

    最实用的还是下面这个: 方法一:纯JS判断 使用这方法既简单,又实用,不需要引入jQuery库,把以下代码加入到<head>里即可. <script type=”text/javas ...

  8. JS判断访问设备、客户端操作系统类型

    先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...

  9. JS判断当前设备是 PC IOS Andriod

    JS判断当前设备是 PC IOS Andriod <script > window.onload = function(){ var isPc = IsPC(); var isAndroi ...

随机推荐

  1. c# base关键的理解

    base 最大的使用地方在面相对性开发的多态性上.(什么是多态,如何理解多态) base可以[完成]创建派生类实例时调用其基类构造函数或者调用基类上已经被其他方法重写的方法 //关于base调用基类构 ...

  2. C#编写最小化时隐藏为任务栏图标的 Window appllication.

    1.设置WinForm窗体属性showinTask=false 2.加notifyicon控件notifyIcon1,为控件notifyIcon1的属性Icon添加一个icon图标. 3.添加窗体最小 ...

  3. PHP的autoload机制的实现解析

    在使用PHP的OO模式开发系统时,通常大家习惯上将每个类的实现都存放在一个单独的文件里,这样会很容易实现对类进行复用,同时将来维护时也很便利 一.autoload机制概述 在使用PHP的OO模式开发系 ...

  4. golang 文件读取

    Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查. 一次性读取 小文件推荐一次性读取,这样程序更简单,而且速度最快. 复制代码 代码如下: func ReadAll(fi ...

  5. datatables设置解析

    条信息" "sSearch":"搜索" 基本的命令 aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式 aaSortingFi ...

  6. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  7. c#简易反射调用泛型方法

    // 所谓程序集的简单理解,存在不同项目中(不是解决方案),即using前需要引用**.dll 1.调用当前类文件下的方法public List<T> GetByCondition< ...

  8. Xcode集成开发环境的安装

    Xcode是苹果官方提供的iOS开发环境,安装方式如下: 安装过程需要登录AppleID账号,如果你没有苹果账号,可以免费注册一个.根据提示就能完成Xcode安装.

  9. html5-表单

    例子: text,number,email 的输入框 <!-- required:必填项 --> <!-- autofocus:获得焦点 --> <!-- placeho ...

  10. escape()、encodeURI()、encodeURIComponent()区别详解--zt

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...