jquery移动端图片放大

在移动端开发中，经常会遇到需要放大图片的需求。这时候可以使用jQuery实现图片放大功能。

首先，需要引入jQuery库和touchSwipe插件：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>

接着，设置CSS样式，让图片默认不可见，并且宽度和高度设置成100%：

img {
  display: none;
  width: 100%;
  height: 100%;
}

然后，使用jQuery代码来实现图片放大功能：

$(document).ready(function() {
  var imgSrc = null;
  
  // 监听图片点击事件
  $(document).on('click','img',function() {
    // 获取当前被点击的图片src
    imgSrc = $(this).attr('src');
    
    // 显示放大图片
    $('#zoomImg').show();
    $('#zoomImg img').attr('src',imgSrc);
    
    // 禁用body滚动
    $('body').css('overflow','hidden');
  });
  
  // 监听缩放图片点击事件
  $('#zoomImg').click(function() {
    // 隐藏放大图片
    $(this).hide();
    $('#zoomImg img').attr('src','');
    
    // 启用body滚动
    $('body').css('overflow','auto');
  });
  
  // 监听图片缩放事件
  $('#zoomImg img').swipe({
    pinchStatus:function(event,phase,direction,distance,duration,fingerCount,pinchZoom) {
      var imgWidth = img.width * pinchZoom;
      var imgHeight = img.height * pinchZoom;
      
      $('#zoomImg img').css({
        'width': imgWidth,'height': imgHeight
      });
    }
  });
});

以上代码通过监听图片点击事件，显示放大后的图片，并禁用body滚动。同时，也可以通过监听缩放图片点击事件，隐藏放大图片，并启用body滚动。另外，监听图片缩放事件，通过计算图片缩放比例，实现图片的缩放效果。