本文例項講述了jQuery實現的移動端圖片縮放功能元件。分享給大家供大家參考，具體如下：

原始碼見這裡：https://github.com/CaptainLiao/zujian/tree/master/matrix

HTML結構：

<div class="box">
 <img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
 <img src="8e7075a2c6b7fb1e083914db000a70c5.jpg">
 <img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
</div>

JS:

function Matrix($el,options) {
  this.$el = $el;
  this.clientW = $(window).width();
  this.imgLen = 0;
  this.cur_x = 0;
  this.start_x = 0;
  // 差值
  this.m = 0;

  this.params = $.extend({},{plus: 1.1,reduce: .9},options);
  this.plus = this.params.plus;
  this.reduce = this.params.reduce;
  // 縮放初始值
  this.s = 1;
  this.flag = false;
}

Matrix.prototype.chooseImg = function () {
  var _this = this,$wrap = this.$el;
  $wrap.on('click','img',function () {
    var mask = $('<div class="fui-mask"></div>'),fui_pop = $('<div class="fui-pop"></div>'),fui_slider = $('<ul class="fui-slider"></ul>'),index,$imgs = $wrap.find('img'),url = '',li = '',clientWidth = _this.clientW;

    index = $(this).index();

    $('body').append(mask).append(fui_pop);
    $('.fui-pop').append(fui_slider);

    if($imgs) {
      $imgs.each(function () {
        url = $(this).attr('src');
        li += ' <li class="fui-slider-item" style="width: '+clientWidth+'px"><img src='+url+' alt="jQuery實現的移動端圖片縮放功能元件示例"></li>';
        _this.imgLen++;
      });
      $('.fui-slider').append(li)
        .width(_this.imgLen * 100 +'%')
        .css('left',-index * clientWidth +'px');
    }else {
      alert('請選擇圖片@@');
      return
    }

    _this.touchSlide();
    _this.closeImg();
    _this.scale();
  })
};
Matrix.prototype.closeImg = function () {
  var _this = this;
  $('.fui-slider-item').on('click',function (e) {
    $('.fui-pop,.fui-mask').remove();
    _this.imgLen = 0;
  })
};
Matrix.prototype.touchSlide = function () {
  var _this = this,$slider = $('.fui-slider'),clientW = this.clientW,imgLen = this.imgLen;

  $slider.on('touchstart','.fui-slider-item',function (e) {
    var index = $(this).index(),m = _this.m,left = parseInt($slider.css('left'));
    _this.start_x = e.originalEvent.touches[0].clientX;

    if(_this.flag) return;
    _this.flag = true;

    $(this).on('touchmove',function (e) {
      _this.cur_x = e.originalEvent.touches[0].clientX;
      m = _this.cur_x - _this.start_x;
      if(Math.abs(m) > 50) {
        console.log(m);
        console.log(m);
        $slider
          .css('left',left+m+'px')
          .find('.fui-slider-item').css({
          'transform': 'scale(1)','transform-origin': '0% 0%'
        });
      }
    });

    $(this).on('touchend',function (e) {
      _this.flag = false;
      // 每次touchend的時候，將縮放值初始化
      _this.s = 1;

      if(Math.abs(m) < clientW / 3){
        $slider.css('left',left+'px');
        return;
      }

      index = index % imgLen;

      if(index ==0){
        if(m > 0) {
          $slider.css('left',left+'px');
        }else {
          $slider.css('left',left-clientW+'px');
        }
      }else if(index < imgLen-1){
        if(m > 0) {
          $slider.css('left',left+clientW+'px');
        }else {
          $slider.css('left',left-clientW+'px');
        }

      }else{
        if(m < 0) {
          $slider.css('left',left+clientW+'px');
        }
      }

    });
  })
};

Matrix.prototype.scale = function() {
  var _this = this;

  $('.fui-slider').on('mousewheel',function(e) {

    var
      oEvent = e.originalEvent,p_x = 0,p_y = 0,delta = oEvent.wheelDelta || -oEvent.delta;

    if(delta > 0) {
      _this.s *= _this.plus;
    }else {
      _this.s *= _this.reduce;
    }
   

    p_x = (oEvent.clientX / $(window).width()) * 100;
    p_y = (oEvent.clientY / $(window).height()) *100 ;

    $(this).css({
      'transform': 'scale('+_this.s+')','transform-origin':p_x+'% '+p_y+'%','-webkit-transform-origin': p_x+'% '+p_y+'%'
    });
  })
};

$.fn.zoom = function (options,cb) {
  var zoom = new Matrix(this,options,cb);
  return zoom.chooseImg();
};

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery擴充套件技巧總結》、《jQuery常用外掛及用法總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷演算法與技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。