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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.js 파일 시스템 운영

es6 해체 방법은 무엇입니까

위 내용은 hammer.js는 모바일 측에서 이미지 제스처 증폭 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!