hammer.js实现图片手势放大效果

本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码，供大家参考，具体内容如下

 //图片手势放大
      var reqanimationframe = (function() {
        return window[hammer.prefixed(window, 'requestanimationframe')] || function(callback) {
          window.settimeout(callback, 1000 / 60);
        };
      })();
      var el = $('img');
      var ticking = false;
      var transform;
      var initscale = 1;
      var _eimg = '';
      for (var m = 0; m < el.length; m++) {
        var mc = new hammer.manager(el[m]);
        mc.add(new hammer.pan({
          threshold: 0,
          pointers: 0
        }));
        mc.add(new hammer.swipe()).recognizewith(mc.get('pan'));
        mc.add(new hammer.pinch({
          threshold: 0
        })).recognizewith(mc.get('pan'));
        mc.on('panstart panmove', onpan);
        mc.on('pinchstart pinchmove', onpinch);
        mc.on('swipe', onswipe);
      }

      function resetelement() {
        el.addclass('animate');
        transform = {
          translate: {
            x: 0,
            y: 0
          },
          scale: 1,
          angle: 0,
          rx: 0,
          ry: 0,
          rz: 0
        };
        requestelementupdate();
      }

      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(' ');
        if (_eimg != '') {
          _eimg.style.webkittransform = value;
          _eimg.style.moztransform = value;
          _eimg.style.transform = value;
          //_eimg.css({ 'transform': value }, { '-webkit-transform': value });
        }
        ticking = false;
      }

      function requestelementupdate() {
        if (!ticking) {
          reqanimationframe(updateelementtransform);
          ticking = true;
        }
      }

      function onpan(ev) {
        el.removeclass('animate');
        transform.translate = {
          x: ev.deltax,
          y: ev.deltay
        };
      }

      function onpinch(ev) {
        if (ev.type == 'pinchstart') {
          initscale = transform.scale || 1;
        }
        el.removeclass('animate');
        transform.scale = initscale * ev.scale;
        requestelementupdate();
        _eimg = ev.target;
        return _eimg;
      }

      function onswipe(ev) {
        var angle = 10;
        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;
        requestelementupdate();
        _eimg = ev.target;
        return _eimg;
      }
      resetelement();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。