hammer.js实现移动端的图片手势放大功能

php中世界最好的语言

发布时间：2018-05-11 14:41:51

4263人浏览过

来源于php中文网

原创

 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();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍：1、console.log()输出调试信息，通过在代码中插入console.log()语句，开发人员可以在控制台输出变量的值、函数的执行结果等信息，以便观察代码的执行流程和状态；2、断点调试，可以在代码中设置断点，以便在特定位置暂停代码的执行，观察变量的值和执行流程等。

348

2023.09.19