移动开发框架,第【二】弹: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实现老虎-机组件,可以嵌套到任意要使用的 ...
随机推荐
- yii2源码学习笔记(十六)
Module类的最后代码 /** * Registers sub-modules in the current module. * 注册子模块到当前模块 * Each sub-module shoul ...
- [Linux]命令行模式切换
图形界面进入命令:Ctrl+Alt+T 进入终端命令:Ctrl+Alt+F1 or Ctrl+Alt+F2 切换至图形界面:按Alt+F7
- 无Xaml的WPF展示
我们创建一个wpf应用程序,我们把里面的xaml文件全部删除,添加一个新类: 如下图: 然后我们cs文件中的代码: using System; using System.Collections.Gen ...
- 【转】改善C#程序的建议2:C#中dynamic的正确用法 空间
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...
- 第三方:GDataXMLNode:xml解析库--备用
一.GDataXMLNode说明 GDataXMLNode是Google提供的用于XML数据处理的类集.该类集对libxml2--DOM处理方式进行了封装,能对较小或中等的xml文档进行读写操作且 ...
- CALayer 为什么选择 cg 开头 而 不选择 UI 开头
CALayer 的属性 为什么选择 cg 开头 而 不选择 UI 开头 , 也就是说 为啥要选择 比如 .CGColor 等
- I2C读写时序
1. I2C写时序图: 注意:最后一个byte后,结束标志在第十个CLK上升沿之后: 2. I2C读时序图: 注意:restart信号格式:读操作结束前最后一组clk的最后一个上升沿,主机应发送NAC ...
- Delphi中用Webbrowser加载百度地图滚轮失效(ApplicationEvents里使用IsChild提前判断是哪个控件的消息)
在Delphi中使用Webbrowser加载百度地图时,点击了其它界面,再回到百度地图中,即使点击了鼠标,再用滚轮也不能缩 放地图,除非点地图里面的自带的控件,之后才能缩放,原因是因为其它窗体控件获得 ...
- mysql表分区、查看分区
原文地址:http://blog.csdn.net/feihong247/article/details/7885199 一. mysql分区简介 数据库分区 数据库分区是一种物理数据库设 ...
- elasticsearch spring 集成
elasticsearch spring 集成 项目清单 elasticsearch服务下载包括其中插件和分词 http://download.csdn.net/detail/u0142011 ...