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 相关文章推荐
js判断60秒以及倒计时示例代码
Jan 24 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
理解Javascript的call、apply
Dec 16 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
js下载文件并修改文件名
2017/05/08 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python中的字符串替换操作示例
2016/06/27 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
利用aardio给python编写图形界面
2017/08/21 Python
python发送邮件脚本
2018/05/22 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
大专自我鉴定范文
2013/10/23 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
安全保证书格式
2015/02/28 职场文书
辞职离别感言
2015/08/04 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Nginx安装配置详解
2022/06/25 Servers