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类 from qq
Nov 13 Javascript
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Element Card 卡片的具体使用
2020/07/26 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python dict乱码如何解决
2020/06/07 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
打架检讨书100字
2014/01/08 职场文书
元旦主持词开场白
2015/05/29 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技