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


Posted in jQuery onMay 01, 2020

本文实例讲述了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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
jquery检测上传文件大小示例
Apr 26 #jQuery
You might like
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
分享10段PHP常用代码
2015/11/11 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
一个JS翻页效果
2007/07/23 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript读写json示例
2014/04/11 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python清理子进程机制剖析
2017/11/23 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
理货员的岗位职责
2013/11/23 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
企业2014年度工作总结
2014/12/10 职场文书