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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery.pager.js分页实现详解
Jul 29 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
工程项目经理任命书
2014/06/05 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
高一英语教学反思
2016/03/03 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
详解Python描述符的工作原理
2021/06/11 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS