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. [bzoj2124]等差子序列(hash+树状数组)

    我又来更博啦     2124: 等差子序列 Time Limit: 3 Sec  Memory Limit: 259 MBSubmit: 941  Solved: 348[Submit][Statu ...

  2. java程序调用存储过程

    java程序调用存储过程       PL/SQL子程序,很多情况下是给应用程序来调用的,所有我们要掌握使用其他编程语言来调用我们写好的存储过程.下面我们介绍下使用java调用Oracle的存储过程. ...

  3. (六)文件操作的主要接口API

    1.什么是操作系统API (1)API是一些函数,这些函数是由linux系统提供支持的,由应用层程序来使用. (2)应用层程序通过调用API来调用操作系统中的各种功能,来干活. (3)学习一个操作系统 ...

  4. Docker中的镜像分层技术详解

    早在集装箱没有出现的时候,码头上还有许多搬运的工人在搬运货物,在集装箱出现以后,码头上看到更多的不是工人,而且集装箱的搬运模式更加单一,更加高效,还有其他的好处,比如:货物多打包在集装箱里面,可以防止 ...

  5. office openxml学习(一)

    以前用过,aspose.dll处理word ,excel,之后发现 npoi,使用了一段时间,总觉得是第三方,不明白底层的实现,直到最近发现了office openxml ,其实这个技术,很久以前就有 ...

  6. debian开机启动管理

    debian开机启动管理(转文) linux下,services的启动.停止等通常是通过/etc/init.d的目录下的脚本来控制的.在启动或改变运行级别是在/etc/rcX.d中来搜索脚本.其中X是 ...

  7. apache开启.htaccess

    1 . 如何让的本地APACHE开启.htaccess 如何让的本地APACHE开启.htaccess呢?其实只要简朴修改一下apache的httpd.conf设置就让APACHE.htaccess了 ...

  8. SAP Adapter启动报错

    在启动Adapter的时候,抛出GateWay Service Exception 当时用的gateway service是“sapgw00” 解决方法:这是由于当sap系统向本机注册服务的时候出错, ...

  9. log4net.config 单独文件

    使用的命名空间下添加 [assembly: log4net.Config.DOMConfigurator(ConfigFile = "log4net.config", Watch ...

  10. 快消零售行业怎么用K2做开关店管理?

    提起迪卡侬,想到的便是它汇聚所有运动于同一个屋檐下的盛况.从来没有一家体育用品零售店可以像迪卡侬一样,涵盖几乎所有级别的运动产品.从入门级到最专业的运动产品,应有尽有,不仅产品质量有保证,价格也平易近 ...