移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
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
文件大小: 23K(源码)、6K(minified)
移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库的更多相关文章
- 移动开发框架,Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.t ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- Prism for WPF 搭建一个简单的模块化开发框架(二)
原文:Prism for WPF 搭建一个简单的模块化开发框架(二) 今天又有时间了,再改改,加了一些控件全局的样式 样式代码 <ResourceDictionary xmlns="h ...
- 文字添加响应事件,js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- js基础系列框架:JS重要知识点(转载)
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
- 从零开始的全栈工程师——js篇2.1(js开篇)
JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么? 页 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...
- 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...
随机推荐
- [转]python pickle包,cPickle包 存储
在之前对Python对象的介绍中 (面向对象的基本概念,面向对象的进一步拓展),我提到过Python“一切皆对象”的哲学,在Python中,无论是变量还是函数,都是一个对象.当Python运行时,对象 ...
- 链表与Hash检索实测
测试环境: Win7 SP1.8G内存.3.4GHz 4核 测试代码: using System; using System.Collections.Generic; using System.Lin ...
- 解决delphi使用sqlite时中文最后一个字是乱码的问题
给部门同事写了个自动生成测试用例执行情况图表的工具,使用的sqlite3,遇到中文分别使用UTF8Encode和UTF8Decode进行处理,可还是出现了某些字段从数据库中读出时,最后一个汉字是乱码的 ...
- 领域驱动设计(Domain Driven Design)参考架构详解
摘要 本文将介绍领域驱动设计(Domain Driven Design)的官方参考架构,该架构分成了Interfaces.Applications和Domain三层以及包含各类基础设施的Infrast ...
- IOSアプリケーション開発環境の構築
IOSアプリケーション開発環境の要求 1) IOSシステムの構造はそのようになっています: 2) ハードウエアの方の要求: コンピューター a) デュアルコアCPU b) 8 gメモリ(開 ...
- 用POLL的方式,没有跑出结果来,立此存照
咦,这些内容,和我以前看内核时的东东,对应起来了.. SELECT,POLL,EPOLL,非阻塞,异步之类的... 但我没有调出来.回家有空了可以看看,不用再敲打代码啦... #!/usr/bin/e ...
- Qt4.8 移植(超详细Configure的参数)
Qt4.8.6 configure 参数 不只是适用于Qt4.8.6,原则上适用于Qt4所有版本 Usage: configure [-h] [-prefix <dir>] [-prefi ...
- android 判断程序是首次(第一次)进入
很多时候,我们需要判断用户是不是第一次进入程序,以决定是不是给用户一些操作提示. 这种功能的实现,说到底还是将数据(一个标志位)存储起来,下次进入程序的时候读取数据进行判断. 我这里只给出一种较简单的 ...
- iconv
iconv -f 源字符集 -t 目标字符集 文件名 iconv -f UTF-8 -t GBK success.msg [root@perass ~]# cat success.msg | t ...
- squid透明代理+iptables防火墙,多网卡详细配置
squid透明代理+iptables防火墙详细配置 看到很多人都在不停地问iptables+squid做透明代理的问题,鄙人不才,斗胆在此做统一解答.如有任何纰漏还望各位批评指教. ========= ...