移动开发框架,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 ...
随机推荐
- TCP/IP协议栈封装解封装过程
发送方将用户数据提交给应用程序把数据送达目的地,整个数据封装流程如下: 用户数据首先传送至应用层,添加应用层信息: 完成应用层处理后,数据将往下层传输层继续传送,添加传输层信息(如TCP或UDP,应用 ...
- Docker部署Go+Mysql+Redis
两种方式Docker和Docker Compose部署web项目,相对于Go语言来说,不管是使用docker部署还是直接服务器部署都相当方便,比python要简单很多. 1.Dockerfile结构解 ...
- 五分钟搭建属于你的AI助手:Ollama+DeepSeek+AnythingLLM深度整合教程
作者简介 微信公众号:密码应用技术实战 博客园首页:https://www.cnblogs.com/informatics/ GitHub地址:https://github.com/warm3snow ...
- nginx 编译安装及配置解析
一.编译安装 安装插件 安装需要的组件 yum -y install gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel ...
- maven项目中解决 .git文件太大问题
一.git项目上传后项目文件太大,git filter-branch手动清理 最近发现一个项目git目录已经达到200MB,严重影响了clone代码.操作之前请全量备份代码,操作失误可恢复 二.测试项 ...
- SQLServer--NOLOCK
介绍 NOLOCK从字面意思可以看出就是没有锁,表示这段sql不去考虑目前table的transaction lock,就是说加上NOLOCK后不受锁的限制读取数据,包括已修改未提交的数据,概念上类似 ...
- Convert byte array to short array in C#
Create the short array at half the size of the byte array, and copy the byte data in: short[] sdata ...
- QT5笔记:34. 视口和窗口
 例子: void Widget::paintEvent(QP ...
- UpdateHub-一款好看且免费开源的Windows软件更新检测工具
UpdateHub 是一款简化计算机上软件更新的应用程序.用户友好的界面允许您快速检查和安装操作系统和应用程序的可用更新. 通过这个应用,你可以快速地查看设备上安装的所有软件的更新,包括操作系统和应用 ...
- Flume - [04] Hive Sink
一.概述 HIVE Sink 将包含分割文本或JSON数据的事件直接流到Hive表或分区中.事件是使用Hive事务编写的.一旦一组事件被提交到Hive,它们就会立即对hive查询可见.流到其中的分 ...