Js 之常见手势操作插件 Hammer.js
一、下载
链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A
提取码:ldqy
二、案例
三、代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="assets/style.css"> <title>Hammer.js</title> <style> html, body { overflow: hidden; margin: 0; } body { -webkit-perspective: 500; -moz-perspective: 500; perspective: 500; } .animate { -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } #hit { padding: 10px; } #log { position: absolute; padding: 10px; } </style> </head> <body> <div style="position: absolute; top:60; left: 0; border: 0;"><img src="22.png"><br>通过二维码手机上查看多点触控效果</div> <div id="log"></div> <div id="hit"style="background: #42d692; width: 150px; height: 150px;"></div> <script src="hammer.js"></script> <script> var reqAnimationFrame = (function () { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); var log = document.querySelector("#log"); var el = document.querySelector("#hit"); var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2); var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2); var ticking = false; var transform; var timer; var mc = new Hammer.Manager(el); mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan')); mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan')); mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]); mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 })); mc.add(new Hammer.Tap()); mc.on("panstart panmove", onPan); mc.on("rotatestart rotatemove", onRotate); mc.on("pinchstart pinchmove", onPinch); mc.on("swipe", onSwipe); mc.on("tap", onTap); mc.on("doubletap", onDoubleTap); mc.on("hammer.input", function(ev) { if(ev.isFinal) { resetElement(); } }); function resetElement() { el.className = 'animate'; transform = { translate: { x: START_X, y: START_Y }, scale: 1, angle: 0, rx: 0, ry: 0, rz: 0 }; requestElementUpdate(); if (log.textContent.length > 2000) { log.textContent = log.textContent.substring(0, 2000) + "..."; } } function updateElementTransform() { var value = [ 'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)', 'scale(' + transform.scale + ', ' + transform.scale + ')', 'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)' ]; value = value.join(" "); el.textContent = value; el.style.webkitTransform = value; el.style.mozTransform = value; el.style.transform = value; ticking = false; } function requestElementUpdate() { if(!ticking) { reqAnimationFrame(updateElementTransform); ticking = true; } } function logEvent(str) { //log.insertBefore(document.createTextNode(str +"\n"), log.firstChild); } function onPan(ev) { el.className = ''; transform.translate = { x: START_X + ev.deltaX, y: START_Y + ev.deltaY }; requestElementUpdate(); logEvent(ev.type); } var initScale = 1; function onPinch(ev) { if(ev.type == 'pinchstart') { initScale = transform.scale || 1; } el.className = ''; transform.scale = initScale * ev.scale; requestElementUpdate(); logEvent(ev.type); } var initAngle = 0; function onRotate(ev) { if(ev.type == 'rotatestart') { initAngle = transform.angle || 0; } el.className = ''; transform.rz = 1; transform.angle = initAngle + ev.rotation; requestElementUpdate(); logEvent(ev.type); } function onSwipe(ev) { var angle = 50; transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0; transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0; transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle; clearTimeout(timer); timer = setTimeout(function () { resetElement(); }, 300); requestElementUpdate(); logEvent(ev.type); } function onTap(ev) { transform.rx = 1; transform.angle = 25; clearTimeout(timer); timer = setTimeout(function () { resetElement(); }, 200); requestElementUpdate(); logEvent(ev.type); } function onDoubleTap(ev) { transform.rx = 1; transform.angle = 80; clearTimeout(timer); timer = setTimeout(function () { resetElement(); }, 500); requestElementUpdate(); logEvent(ev.type); } resetElement(); </script> </body> </html>
Js 之常见手势操作插件 Hammer.js的更多相关文章
- 多点触控插件Hammer.js
插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. 使用方法: <script src=<span class ...
- 插件: Hammer.js
官网: http://hammerjs.github.io/ hammer.js 官网 http://hammerjs.github.io/api/ 官网API(官网写的实在太简了!不好用.注意里面 ...
- JS/JQ常见兼容辅助插件
1.Respond.js Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-widt ...
- 代码笔记-触摸事件插件hammer.js使用
如果要使用jquery,则需要下载jquery.hammer.min.js版本 新建一个hammer对象生成的对象是dom对象,不能直接使用jqeury 的 $(this)方法,需要先将其转成jqu ...
- js手机移动端选择插件 mobileSelect.js
一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...
- JS - 超强大文本动画插件Textillate.js
http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.
- JS+CSS3 360度全景图插件 - Watch3D.js
日常闲扯 从上一篇文章到这篇中间快过了一年了,时间真滴过得快.不是在下中间没想过写新的文章,而是自己确实变懒了(体重+1 +1 +1 +1....) ..OTL...不过到最后觉得还是需要写点东西,不 ...
- 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 ...
- javascript 手势缩放 旋转 拖动支持:hammer.js
原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...
随机推荐
- VBA循环(十一)
当需要多次执行一段代码时,就可以使用循环语句. 一般来说,语句是按顺序执行的:函数中的第一个语句首先执行,然后是第二个,依此类推. 编程语言提供了各种控制结构,允许更复杂的执行路径. 循环语句允许多次 ...
- 【实战】SQL注入小脚本
1.ORACLE布尔型盲注 import urllib import urllib2 import requests payloads = '_ABCDEFGHIJKLMNOPQRSTUVWXYZ' ...
- Android简单闹钟设置
利用AlarmManager实现闹钟设置 //设置本地闹钟,actiongString:闹钟标识 setLocAlarm(int week, String actionString) { Calend ...
- java中级面试题
1.Java中堆和栈有什么不同? 每个线程都有自己的栈内存,用于存储本地变量,方法参数和栈调用,一个线程中存储的变量对其它线程是不可见的.而堆是所有线程共享的一片公用内存区域.对象都在堆里创建,为了提 ...
- mysql的2种备份mysqldump 和 Xtrabackup
mysqldump备份方式 备份 mysqldump -uroot -p 数据库名 > 备份的文件名 恢复(先关闭数据库) mysql -uroot -p 数据库名 < 备份的文件名 Xt ...
- Python_算术运算符
1.算术运算符 示例: >>> num1=7 >>> num2=3 >>> num1+num2 #+ 10 >>> num1-n ...
- MySQL 是怎样运行的:从根儿上理解 MySQL:字符集和比较规则
本文章借鉴自https://juejin.im/book/5bffcbc9f265da614b11b731 字符集和比较规则简介 一些重要的字符集 ASCII字符集 共收录128个字符,包括空格.标点 ...
- jar包中存在包名和类名都相同的情况
情况: 在maven中引入两个包都有项目的包名和类名,只是jar包的名字不同.两个包的一部分在代码中的不同地方都需要用到. 网上找的大部分都是: 只有改变编译器优先选择的jar顺序(这个顺序是可以改变 ...
- Markdown编辑器的使用测试
北京高校(大标题) 北京电子科技学院(小标题) 计算机技术(一级标) 研究生(二级标) 列表(三级标) 姓名 - 扎西 - 卓玛 学号 - 01 - 02 超链接 [QQ邮箱](https://www ...
- Java中list在循环中删除元素的坑
JAVA中循环遍历list有三种方式for循环.增强for循环(也就是常说的foreach循环).iterator遍历. 1.for循环遍历list for(int i=0;i<list.siz ...