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. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序处理并发

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第十篇:为ASP.NET MVC应用程序 ...

  2. mysql 日期格式化

    SELECT plc.id, plc.policy_no, plc.out_date, og.organ_name, ir.insurer_name, pd.product_name, plc.pol ...

  3. DbInitializer.cs初始化过程中context.entityName.Add()遇到的类型不匹配错误

    用Asp.Net Core+EF Core建立一个测试项目过程中,使用DbInitializaer.cs进行数据库表的初始化工作,当项目测试运行时执行到context.实体名.Add()时,提示错误信 ...

  4. havok之内存管理

    [现象记录] 1.往world和rb里都各自加入一个entityListener,当这个rb被remove掉之后, 会首先调用world里的listener的removecallback, 再调用rb ...

  5. 导出Excel 有身份证时注意

    if (this.GridView1.Rows.Count != 0)            {                HttpContext.Current.Response.Clear() ...

  6. oracle修改序列

      Oracle 序列(Sequence)主要用于生成流水号,在应用中经常会用到,特别是作为ID值,拿来做表主键使用较多. 但是,有时需要修改序列初始值(START WITH)时,有同仁使用这个语句来 ...

  7. nginx rewrite 指令last break区别最详细的解释

    转自:http://blog.sina.com.cn/s/blog_4f9fc6e10102ux0w.html http://blog.cafeneko.info/2010/10/nginx_rewr ...

  8. WCF初探-21:WCF终结点(endpoint)

    WCF终结点概述 在之前文章的示例中,我们都是通过配置服务的终结点(endpoint)发布的服务,供客户端调用,这是因为WCF服务的所有通信都是通过该服务的终结点进行的.每个终结点(endpoint) ...

  9. 爱默生UPS并机系统:进入与退出操作方法

    UPS并机系统的进入与退出: 进入:.合UPS的出线及进线开关:开启第一台UPS,等待整流指示灯常亮.然后Invert On,正常开机,此时UPS进入逆变状态 .合另外一台UPS的出线及进线开关,等待 ...

  10. redis服务和扩展安装(windows)

    Windows下安装redis和在php中使用phpredis扩展 原文地址:http://m.oschina.net/blog/281058 Junn 发布于 2年前,共有 0 条评论 1.redi ...