jQuery实现的移动端图片缩放功能组件示例

本文实例讲述了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=""></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+'px');
        }else {
          $slider.css('left', left+clientw+'px');
        }
      }

    });
  })
};

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

  $('.fui-slider').on('mousewheel','.fui-slider-item', 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();
};