hammer.js实现图片手势放大效果


Posted in Javascript onAugust 29, 2017

本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下

//图片手势放大
      var reqAnimationFrame = (function() {
        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();
      var el = $('img');
      var ticking = false;
      var transform;
      var initScale = 1;
      var _eImg = '';
      for (var m = 0; m < el.length; m++) {
        var mc = new Hammer.Manager(el[m]);
        mc.add(new Hammer.Pan({
          threshold: 0,
          pointers: 0
        }));
        mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Pinch({
          threshold: 0
        })).recognizeWith(mc.get('pan'));
        mc.on('panstart panmove', onPan);
        mc.on('pinchstart pinchmove', onPinch);
        mc.on('swipe', onSwipe);
      }

      function resetElement() {
        el.addClass('animate');
        transform = {
          translate: {
            x: 0,
            y: 0
          },
          scale: 1,
          angle: 0,
          rx: 0,
          ry: 0,
          rz: 0
        };
        requestElementUpdate();
      }

      function updateElementTransform() {
        var value = ['translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)', 'scale(' + transform.scale + ', ' + transform.scale + ')', 'rotate3d(' + transform.rx + ',' + transform.ry + ',' + transform.rz + ',' + transform.angle + 'deg)'];
        value = value.join(' ');
        if (_eImg != '') {
          _eImg.style.webkitTransform = value;
          _eImg.style.mozTransform = value;
          _eImg.style.transform = value;
          //_eImg.css({ 'transform': value }, { '-webkit-transform': value });
        }
        ticking = false;
      }

      function requestElementUpdate() {
        if (!ticking) {
          reqAnimationFrame(updateElementTransform);
          ticking = true;
        }
      }

      function onPan(ev) {
        el.removeClass('animate');
        transform.translate = {
          x: ev.deltaX,
          y: ev.deltaY
        };
      }

      function onPinch(ev) {
        if (ev.type == 'pinchstart') {
          initScale = transform.scale || 1;
        }
        el.removeClass('animate');
        transform.scale = initScale * ev.scale;
        requestElementUpdate();
        _eImg = ev.target;
        return _eImg;
      }

      function onSwipe(ev) {
        var angle = 10;
        transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
        transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
        transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
        requestElementUpdate();
        _eImg = ev.target;
        return _eImg;
      }
      resetElement();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解javaScript中的事件驱动
May 21 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
js禁止表单重复提交
Aug 29 #Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 #Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 #Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 #Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 #Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
You might like
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php数组分页实现方法
2016/04/30 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
SVG描边动画
2017/02/23 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
测绘工程本科生求职信
2013/10/10 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
骨干教师事迹材料
2014/12/17 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Python实现聚类K-means算法详解
2022/07/15 Python