jquery實現移動端手勢放大縮小圖片

var touchScale = function() {
	     var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,
		 one = false, 
		 
	
	     $touch = $(".showDiv img"),  //選擇放大縮小的元素
	     originalWidth = $touch.width(),
		 originalHeight = $touch.height(),
	     baseScale = parseFloat(originalWidth/originalHeight),
	     imgData = [],
	     bgTop = parseInt($(".showDiv img").css('top'));
	     function siteData(name) {
	          imgLeft = parseInt(name.css('left'));
	          imgTop = parseInt(name.css('top'));
	          imgWidth = name.width();
	          imgHeight = name.height();
	      }
	      $(document).on('touchstart touchmove touchend', $(".showDiv img"), function(event){
	
             var $me = $(".showDiv img");
             
             touch1 = event.originalEvent.targetTouches[0],  // 第一根手指touch事件
 
             touch2 = event.originalEvent.targetTouches[1],  // 第二根手指touch事件
 
             fingers = event.originalEvent.touches.length;   // 屏幕上手指數量
 
             //手指放到屏幕上的時候，還沒有進行其他操作
             if (event.type == 'touchstart') {
                 if (fingers == 2) {
                     // 縮放圖片的時候X坐標起始值
                     startX = Math.abs(touch1.pageX - touch2.pageX);
                     one = false;
                 }else if (fingers == 1) {
                     x1 = touch1.pageX;
                     y1 = touch1.pageY;
                     one = true;
                  }
              //siteData($me);
              }
              //手指在屏幕上滑動
              else if (event.type == 'touchmove') {
                   if (fingers == 2) {
                   // 縮放圖片的時候X坐標滑動變化值
                   endX = Math.abs(touch1.pageX - touch2.pageX);
                   scale = endX - startX;
          
                   $me.css({
                        'width' : originalWidth + scale,
                        'height' :originalWidth + scale　　//如果圖片被拉伸了可以把這句去掉，讓圖片自適應
                   });  
                   
   				}else if (fingers == 1) {
                    x2 = touch1.pageX;
                    y2 = touch1.pageY;
//                     if (one) {
//                          $me.css({
//                          'left' : imgLeft + (x2 - x1),
//                           'top' : imgTop + (y2 - y1)
//                          });
//                      }
                }
          }
           //手指移開屏幕
          else if (event.type == 'touchend') {
          // 手指移開后保存圖片的寬
                originalWidth = $touch.width(),
                siteData($me);
                        imgData = [[imgLeft, imgTop-bgTop, imgWidth, imgHeight],[0, 0, 640, 640]];
                    }
                });
                var getData = function(){
                    return imgData;
                };
                return {
                    imgData : getData
                }
      };

　　在點擊打開大圖的時候，使用touchScale();來生效js

　　如果圖片被拉伸了，把 'height' :originalWidth + scale 去掉即可

　　如果切換圖片想讓圖片變成初始化尺寸，可以在切換圖片時，把圖片的with設置成100%就可以了

　

　　參考網址：https://blog.csdn.net/weixin_41578603/article/details/90212578