欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-26 12:53:25
本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下 //图片手势放大 var reqanimation...

本文实例为大家分享了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();

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