jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例

更新時(shí)間：2020年05月01日 11:47:00 作者：廖飛銀

這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件。分享給大家供大家參考，具體如下：

源碼見(jiàn)這里：https://github.com/CaptainLiao/zujian/tree/master/matrix

HTML結(jié)構(gòu)：

<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('請(qǐng)選擇圖片@@');
      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的時(shí)候，將縮放值初始化
      _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();
};

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: