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

213 阅读 0 评论 141 点赞

我是靠谱客的博主野性犀牛，最近开发中收集的这篇文章主要介绍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();
};

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。