移动开发框架,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 ...
随机推荐
- oracle和sqlserver对于事务数据库死锁处理的区别
create table aa_test ( id int constraint TEST_PK primary key, name varchar2(50) ) / insert into aa_t ...
- 第8章 LINQ 查询
第8章 LINQ 查询 8.2 流式语法 8.2.2 使用 Lambda 表达式 常用运算符 Where() 筛选器 Order() 排序器 Select() 映射器 Take() 获取前 x 个元素 ...
- Ubuntu手动安装Mysql包
ubuntu通过tar包安装mysql5.7.21 1.下载解压命令见下: wget https://dev.mysql.com//Downloads/MySQL-5.7/mysql-5.7.21-l ...
- 定制Allure报告
定制Allure报告 自定义Logo图标 效果图 实现步骤 定位资源文件夹:首先,您需要定位到 allure/plugins/custom-logo-plugin/static 文件夹.这个文件夹通常 ...
- CMW500 Bluetooth信令测试
一.简介 R&SCMW500宽带无线通信测试仪是适用于射频集成和协议开发的通用测试平台,其内部集成RF功率计和带List模式的CW发生器,可以完成无线设备的快速校准:同时还集成了矢量信号分析仪 ...
- FreeSql学习笔记——3.查询
前言 FreeSql中查询的支持非常丰富,包括链式语法,多表查询,表达式函数:写法多种多样,可以使用简单的条件查询.sql查询.联表.子表等方式用于查询数据, 查询的格式也有很丰富,包括单条记录, ...
- 最新demo版|如何0-1开发支付宝小程序之前期准备篇(一)
小程序作为目前一种轻量.便捷的应用.目前应用越来越广泛了. 很多没有开发经验的开发同学可能初次接触就是小程序开发,为了详细讲解下小程序开发的步骤,我会按照小程序的开发流程一步一步从零开始给大家介绍下如 ...
- DeepSeek R1本地与线上满血版部署:超详细手把手指南
一.DeepSeek R1本地部署 1.下载ollama下载地址 本人是Mac电脑,所以选第一项,下面都是以Mac环境介绍部署,下载好把ollama运行起来即可启动Ollama服务. Ollama默认 ...
- QT5笔记:7. 自定义类、自定义信号及类的元对象信息
自定义的QPerson类,需要继承 QObject类 qperson.h头文件 #ifndef QPERSON_H #define QPERSON_H #include <QObject> ...
- 如何在 CentOS 7 linux上安装和使用 FFmpeg
SSH首选FinalShell 1.下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-5.1.tar.gz tar -zxvf ffmpeg-5.1.ta ...