移动开发框架,Hammer.js 移动设备触摸手势js库
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库的更多相关文章
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...
- ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库
11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...
- 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库
毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库 在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或 ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- JS判断移动设备最佳方法 并实现跳转至手机版网页
我在开发的Magento或Wordpress主题时,通过都会制作手机版本,为了实现某个片段在手机端和桌面端不同功能,又或者如果是手机设备,就跳转到指定的网页上,那么这里就需要用到JS来做判断了,下面有 ...
- JS判断移动设备最佳方法
最实用的还是下面这个: 方法一:纯JS判断 使用这方法既简单,又实用,不需要引入jQuery库,把以下代码加入到<head>里即可. <script type=”text/javas ...
- JS判断访问设备、客户端操作系统类型
先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...
- JS判断当前设备是 PC IOS Andriod
JS判断当前设备是 PC IOS Andriod <script > window.onload = function(){ var isPc = IsPC(); var isAndroi ...
随机推荐
- [HIHO1079]离散化(线段树、染色)
题目链接:http://hihocoder.com/problemset/problem/1079 MD坑爹,线段查询的时候左闭右开.插完挨个点找一遍扔set里,注意没染色的情况. #include ...
- Sprint(第三天11.16)
Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:点餐系统 4.团队博客地址:http://www.cnblogs.com/iamCarson/ 团 ...
- SVM学习(续)
SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...
- 对数组进行malloc动态分配的一些总结
笔者在处理程序奔溃问题的时候,遇到栈溢出的情况,栈溢出最常见的情况是:迭代调用和数组过大.数组占用占空间,所以改为了malloc方式放在堆上.想想,就想整理一下关于对多维数组的动态分配问题. 一,堆和 ...
- selenium 安装与 chromedriver安装
直接使用pip安装 pip slenium 用 Chrome 浏览器来测试 from selenium import webdriver browser = webdriver.Chrome() ...
- 使用WIC组件转换图片格式
#include <windows.h>#include <Wincodec.h>#pragma comment(lib, "Windowscodecs.lib&qu ...
- 编写windows版ANE
1.编写WinANE.dll: #include <windows.h> #include <stdlib.h> #include <FlashRuntimeExtens ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发(二) 接收微信消息并且解析XML(附源码)
文章导读: C#微信公众号接口开发之从零开发(一) 接入微信公众平台 微信接入之后,微信通过我们接入的地址进行通信,其中的原理是微信用户发送消息给微信公众账号,微信服务器将消息以xml的形式发送到我们 ...
- Python、PIP环境变量的配置
Python安装的路径:D:\Python35 pip的环境变量 Python和pip的PATH: PIP下载链接:https://pypi.python.org/pypi/pip 随意解压好,然后C ...
- yii2-user
https://github.com/dektrium/yii2-user 安装 : composer require "dektrium/yii2-user:0.9.*@dev" ...