Hammer.js implémente la fonction d'amplification des gestes d'image côté mobile

 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(&#39;pan&#39;));
       mc.add(new Hammer.Pinch({
         threshold: 0
       })).recognizeWith(mc.get(&#39;pan&#39;));
       mc.on(&#39;panstart panmove&#39;, onPan);
       mc.on(&#39;pinchstart pinchmove&#39;, onPinch);
       mc.on(&#39;swipe&#39;, onSwipe);
     }
 
     function resetElement() {
       el.addClass(&#39;animate&#39;);
       transform = {
         translate: {
           x: 0,
           y: 0
         },
         scale: 1,
         angle: 0,
         rx: 0,
         ry: 0,
         rz: 0
       };
       requestElementUpdate();
     }
 
     function updateElementTransform() {
       var value = [&#39;translate3d(&#39; + transform.translate.x + &#39;px, &#39; + transform.translate.y + &#39;px, 0)&#39;, &#39;scale(&#39; + transform.scale + &#39;, &#39; + transform.scale + &#39;)&#39;, &#39;rotate3d(&#39; + transform.rx + &#39;,&#39; + transform.ry + &#39;,&#39; + transform.rz + &#39;,&#39; + transform.angle + &#39;deg)&#39;];
       value = value.join(&#39; &#39;);
       if (_eImg != &#39;&#39;) {
         _eImg.style.webkitTransform = value;
         _eImg.style.mozTransform = value;
         _eImg.style.transform = value;
         //_eImg.css({ &#39;transform&#39;: value }, { &#39;-webkit-transform&#39;: value });
       }
       ticking = false;
     }
 
     function requestElementUpdate() {
       if (!ticking) {
         reqAnimationFrame(updateElementTransform);
         ticking = true;
       }
     }
 
     function onPan(ev) {
       el.removeClass(&#39;animate&#39;);
       transform.translate = {
         x: ev.deltaX,
         y: ev.deltaY
       };
     }
 
     function onPinch(ev) {
       if (ev.type == &#39;pinchstart&#39;) {
         initScale = transform.scale || 1;
       }
       el.removeClass(&#39;animate&#39;);
       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();

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Fonctionnement du système de fichiers Node.js

Quelles sont les méthodes de déconstruction es6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!