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 ...

随机推荐

Docker可视化管理工具portainer的简单应用
portainer简介略安装portainer $ docker pull portainer/portainer$ docker volume create portainer_data $ d ...
《程序是怎样跑起来的》读书笔记——第一章对程序员来说CPU是什么
1 程序的运行流程 2 CPU的组成 3 寄存器的主要种类和功能 "程序计数器"--决定程序流程的 4 条件分支和循环机制 4.1 顺序执行 4.2 选择分支 5 函数的调用机制 ...
Node.js 实战（一）之—防灾备措施
前言博客系统上线已经3个多月了,中间没有出现过宕机事故,一直稳定运行.自己写的代码还是挺严谨的,小小鼓励一下!上周对云服务器进行了一次内存扩容,扩容后重启了一次服务器.虽然过程很短,但是因重启后导致 ...
js循环修改数组属性key值
var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...
javascript_12-递归
递归 // function f1(){ // console.log("hello"); // f1(); // } // f1(); // 给递归添加结束的条件 var i = ...
DataGrip像navicat一样导入导出表数据,不是导出导入insert和update这种
用的是mysql,其他也一样首先是导出: 然后: 然后就可以导出了,导出去别的工具能不能拿来导入不知道... 然后是导入: 然后:
【DRF框架】路由组件
视图组件涉及的路由补充: from rest_framework.viewsets import ViewSetMixin 对路由进行了重新的分发,重写了as_view() 方法,重新封装了请求方法 ...
Linux命令——chkconfig
拓展:如何增加一个系统服务service chkconfig本身用法不复杂,其作用是控制service是否开机启动. 对于CentOS而言,7.X版本已经不再使用SysV,SysV相关的命令基本上没有 ...
grafana忘记登陆密码
找到grafana的数据文件grafana.db find / -name "grafana.db" ps:默认的安装路径为/var/lib/grafana/grafana.db ...
AD19新功能之ActiveRoute
AD19新增了ActiveRoute功能(自动布线功能),强大而实用: 1.河流式布线模式在PCB面板中选择相应的网络,选中飞线,或者按住 Alt 然后鼠标从右下往左上进行框选,选中对应的飞线然后 ...

Js 之常见手势操作插件 Hammer.js

Js 之常见手势操作插件 Hammer.js的更多相关文章

随机推荐

热门专题