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>
原文地址：https://www.cnblogs.com/yang-2018/p/11677523.html