移动开发框架,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 ...
随机推荐
- mysql事务中使用临时表
最近在使用存储过程完成晚上数据的定时汇总功能,其中需要在存储过程中启用事务,但是发现使用了create table语句后事务会自动提交这个语句前的语句,即便是这个语句后发生了错误进行了回滚. 测试语句 ...
- flutter如何调试夜神模拟器
1.下载夜神模拟器 地址:https://www.yeshen.com/ 下载后直接傻瓜式安装即可 2. 将夜神模拟器设置为手机版本 打开夜神模拟器,点击点击右上角的设置: 然后选择 性能设置 然后 ...
- ssh免密登录,服务器互信。
1.ssh-keygen 产生本主机的公钥和私钥. ssh-keygen -t rsa 文件保存在 ~/.ssh/目录下,其中 id_rsa:本地服务器的私钥 id_rsa.pub:本地服务器的公钥 ...
- Springboot 3.x 集成Knife4j [踩坑日记]
之前项目用的是SpringBoot2.x 新项目用了SpringBoot3.x版本,引入Knife4j 报错java.lang.TypeNotPresentException: Type javax. ...
- 安川YASKAWA工业机器人板卡维修策略
一.安川YASKAWA工业机器人板卡识别故障症状 首先,需要准确识别电路板故障的症状.这通常包括安川YASKAWA机器人操作不稳定.错误代码频繁出现.某些功能失效或整体性能下降等.通过仔细观察和诊断, ...
- Python基础笔记-while、字符串格式化、运算符、基础概念与数据类型
前言 !!!注意:本系列所写的文章全部是学习笔记,来自于观看视频的笔记记录,防止丢失.观看的视频笔记来自于:哔哩哔哩武沛齐老师的视频:2022 Python的web开发(完整版) 入门全套教程,零基础 ...
- 【ABAQUS Material】density 行为
1.overview 进行eigenfrequency . transient dynamic analysis. transient heat transfer analysis. adiabati ...
- PPT_标题
一 调节字体大小 1.字体-字魂71号-御守锦书 2.更改字体大小(138.96.80.80.96.138) 3.字体背景 复制背景图片->选择ppt文字->设置图片格式->选择来自 ...
- 【由技及道】统一封装API返回结果后String返回报错文件解决原理--Spring 消息转换器的层次图解与规则说明【人工智障AI2077的开发问题日志002】
▄▀▄ ▀■■■▀ AI2077的日志片段 ▄■■■■■▄ [ERROR] | 量子通道波动异常! | 检测到StringConverter试图吞噬ApiResult对象 | 启动二向箔防御程序... ...
- Proteus中数码管动态扫描显示不全(已解决)
前言 我是直接把以前写的 51 数码管程序复制过来的,当时看的郭天祥的视频,先送段选,消隐后送位选,最后来个 1ms 的延时. 代码在 Proteus 中数码管静态是可以的,动态显示出了问题--显示不 ...