hammer.js使用
手势包括点击（tap），长按（press），滑动（swipe），方向（pan）
使用实例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.min.css" />
<title></title>
<style>
#myElement {
background: silver;
height: 300px;
text-align: center;
font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
</head>
<body class="flex-column center-center">
<div id="myElement"></div>
<script type="text/javascript" src="hammer.js"></script>
<script>
var myElement = document.getElementById('myElement');
var hammer = new Hammer(myElement); hammer.on("swipeleft", function (ev) {
console.log(ev.type);
});
hammer.on("swiperight", function (ev) {
console.log(ev.type);
});
hammer.on("panleft panright panup pandown tap press", function (ev) {
console.log(ev.type);
});
</script>
</body>
</html>
hammer.js使用的更多相关文章
- H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- Hammer.js手势库 安卓4.0.4上的问题
Hammer.JS - v1.0.7dev - 2014-02-18 1.Hammer.JS 在安卓4.0.4 , 4.1上 touchmove事件丢失 https://code.google.com ...
- Hammer.js分析（四）——recognizer.js
不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...
- Hammer.js分析（三）——input.js
input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...
- Hammer.js分析（二）——manager.js
“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会 ...
- Hammer.js分析（一）——基础结构
从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...
- hammer用法 jquery.hammer.js
jquery.hammer.js使用时要先引入hammer.min.js 下面代码是滑动效果: $("#nav").hammer().bind('swiperight', fu ...
- hammer.js的六大事件
1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...
- 利用轮播原理结合hammer.js实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...
- Hammer.js
一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...
随机推荐
- Last_SQL_Error: Error 'Can't drop database
此文办法只用应急, 别的办法我还没想到, 文章是Copy来的 MySQL主从同步报错排错结果及修复过程之:Slave_SQL_Running: No 起因调查: 收到大量邮件报警想必事出有因,就问同 ...
- undertow服务器
参考地址:http://undertow.io/undertow-docs/undertow-docs-1.3.0/index.html 1.引入相关jar <dependencies> ...
- PAT甲级——A1109 Group Photo【25】
Formation is very important when taking a group photo. Given the rules of forming K rows with Npeopl ...
- Activiti添加批注（comment）信息
在每次提交任务的时候需要描述一些批注信息,例如:请假流程提交的时候要描述信息为什么请假,如果领导驳回可以批注驳回原因等 1.添加批注 // 由于流程用户上下文对象是线程独立的,所以要在需要的位置设置, ...
- linux常用软连接使用ln -s
[软连接]另外一种连接称之为符号连接(Symbolic Link),也叫软连接.软链接文件有类似于Windows的快捷方式.它实际上是一个特殊的文件.在符号连接中,文件实际上是一个文本文件,其中包含的 ...
- （转）NodeJS - 第一个应用程序Hello World
安装NodeJs 在创建实际的“Hello,World!”应用之前,我们应该先安装NodeJS,安装NodeJS可以访问NodeJS官网,下载相应系统的NodeJS的安装包,进行安装. 程序组件 关于 ...
- JS数组 团里添加新成员（向数组增加一个新元素）只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。myarray[5]=88;
团里添加新成员(向数组增加一个新元素) 上一节中,我们使用myarray变量存储了5个人的成绩,现在多出一个人的成绩,如何存储呢? 只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素. my ...
- LuoguP3338 [ZJOI2014]力
题目描述 给出n个数qi,给出Fj的定义如下: \[F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\frac{q_i q_j}{(i ...
- python所有的标准异常类
异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是输入^C) Exception 常规错误的基类 ...
- day06 tar命令使用，vim简单操作以及linux开机过程
上节课复习: cat: 查看全部文件内容 head: 从头查看文件内容,默认为前10行 tail: tail -f //动态查看文件是否增加内容 >> 追加 > 覆盖 more: 百 ...