移动开发框架,Hammer.js 移动设备触摸手势js库
原文:https://www.cnblogs.com/zhwl/p/3525238.html
hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档。
使用方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 先要对监听的DOM进行一些初始化
var hammer = new Hammer(document.getElementById("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插件的形式调用
|
1
2
3
4
5
6
7
8
9
|
$("#element")
.hammer({
// 对DOM进行一些初始化,这里可以加入一些参数
})
.bind("tap", function(ev) {
console.log(ev);
});
|
官网地址:http://eightmedia.github.com/hammer.js/ (带演示)
源码地址:https://github.com/EightMedia/hammer.js
移动开发框架,Hammer.js 移动设备触摸手势js库的更多相关文章
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 移动开发框架,Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.t ...
- <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 等不同操作系统的手持或 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- 超棒的JS移动设备滑动内容幻灯实现 - Swiper
来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...
- touch.js - 移动设备上的手势识别与事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
- Android 触摸手势基础 官方文档概览
Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...
- Android 触摸手势基础 官方文档概览2
Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...
随机推荐
- [文件格式/数据存储] Parquet:开源、高效的列式存储文件格式协议
序:缘起 => 用 java 读取 parquet 文件 生产环境有设备出重大事故,又因一关键功能无法使用,亟需将生产环境的原始MQTT报文(以 parquet 文件格式 + zstd 压缩格式 ...
- 看图识WAF
看图识WAF 宝塔 腾讯云T-Sec 阿里云盾 创宇盾
- CF1896H2
看不懂的题 首先考虑 \([a_i\neq b_i]=-2a_ib_i+a_i+b_i\),所以: \[f(a,b)=\sum a_i+\sum b_i-2\sum a_ib_i=N-2\sum a_ ...
- 多线程之lamda表达式
代码简化过程 public class TestLambda1 { //3.静态内部类 static class Like2 implements ILike{ ...
- QT5笔记:6. QT 与 C++
QT 对标准的C++进行了扩展,引入了一些新的概念和功能 QT 的元对象编译器(Meta-Object Compiler, MOC)是一个预处理器,它预处理QT项目,先将QT的一些特性代码转换为标准的 ...
- TOGAF 内容元模型综合指南
介绍 开放群组架构框架 (TOGAF) 是一种广泛使用的企业架构框架,它提供了一种结构化的方法来设计.规划.实施和管理企业信息技术架构.TOGAF 内容元模型是该框架的重要组成部分,它提供了一种标准化 ...
- SpringBoot - [09] Restful风格接口方法&参数
GetMapping.PostMapping.DeleteMapping.PutMapping是SpringBoot中常用的HTTP请求映射注解,它们分别对应HTTP协议中的GET.POST.DELE ...
- Ansible - [03] Ansible ad-hoc模式
Ansible ad-hoc是一种通过命令行批量管理的方式 格式:ansible 主机集合 -m 模块名 -a "参数" 其他参数: -k 使用密码远程.-i 指定主机列表文件 以 ...
- c++常量引用,通过被引用变量修改数据无法同步到引用
正常情况下被引用的对象改变,常量引用的值也跟着改变.i和j是同一个对象,所以是同步的: int i = 42; const int& j = i; i = 43; cout << ...
- JUC并发—14.Future模式和异步编程分析
大纲 1.FutureTask(Future/Callable)的使用例子 2.FutureTask(Future/Callable)的实现原理 3.FutureTask(Future/Callabl ...