touch.js 拖动、缩放、旋转 (鼠标手势)功能代码


Posted in Javascript onFebruary 04, 2017

可以实现手势操作:拖动、缩放、旋转。封装好的脚本方法是这样的:

var cat = window.cat || {}; 
cat.touchjs = { 
  left: 0, 
  top: 0, 
  scaleVal: 1,  //缩放 
  rotateVal: 0,  //旋转 
  curStatus: 0,  //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 
  //初始化 
  init: function ($targetObj, callback) { 
    touch.on($targetObj, 'touchstart', function (ev) { 
      cat.touchjs.curStatus = 0; 
      ev.preventDefault();//阻止默认事件 
    }); 
    if (!window.localStorage.cat_touchjs_data) 
      callback(0, 0, 1, 0); 
    else { 
      var jsonObj = JSON.parse(window.localStorage.cat_touchjs_data); 
      cat.touchjs.left = parseFloat(jsonObj.left), cat.touchjs.top = parseFloat(jsonObj.top), cat.touchjs.scaleVal = parseFloat(jsonObj.scale), cat.touchjs.rotateVal = parseFloat(jsonObj.rotate); 
      callback(cat.touchjs.left, cat.touchjs.top, cat.touchjs.scaleVal, cat.touchjs.rotateVal); 
    } 
  }, 
  //拖动 
  drag: function ($targetObj, callback) { 
    touch.on($targetObj, 'drag', function (ev) { 
      $targetObj.css("left", cat.touchjs.left + ev.x).css("top", cat.touchjs.top + ev.y); 
    }); 
    touch.on($targetObj, 'dragend', function (ev) { 
      cat.touchjs.left = cat.touchjs.left + ev.x; 
      cat.touchjs.top = cat.touchjs.top + ev.y; 
      callback(cat.touchjs.left, cat.touchjs.top); 
    }); 
  }, 
  //缩放 
  scale: function ($targetObj, callback) { 
    var initialScale = cat.touchjs.scaleVal || 1; 
    var currentScale; 
    touch.on($targetObj, 'pinch', function (ev) { 
      if (cat.touchjs.curStatus == 2) { 
        return; 
      } 
      cat.touchjs.curStatus = 1; 
      currentScale = ev.scale - 1; 
      currentScale = initialScale + currentScale; 
      cat.touchjs.scaleVal = currentScale; 
      var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)'; 
      $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle); 
      callback(cat.touchjs.scaleVal); 
    }); 
    touch.on($targetObj, 'pinchend', function (ev) { 
      if (cat.touchjs.curStatus == 2) { 
        return; 
      } 
      initialScale = currentScale; 
      cat.touchjs.scaleVal = currentScale; 
      callback(cat.touchjs.scaleVal); 
    }); 
  }, 
  //旋转 
  rotate: function ($targetObj, callback) { 
    var angle = cat.touchjs.rotateVal || 0; 
    touch.on($targetObj, 'rotate', function (ev) { 
      if (cat.touchjs.curStatus == 1) { 
        return; 
      } 
      cat.touchjs.curStatus = 2; 
      var totalAngle = angle + ev.rotation; 
      if (ev.fingerStatus === 'end') { 
        angle = angle + ev.rotation; 
      } 
      cat.touchjs.rotateVal = totalAngle; 
      var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)'; 
      $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle); 
      $targetObj.attr('data-rotate', cat.touchjs.rotateVal); 
      callback(cat.touchjs.rotateVal); 
    }); 
  } 
};

html代码:

<div style="position:relative;width: 100%;height: 250px;overflow: hidden;border: 1px dashed #ff0000;"> 
 <img id="targetObj" style="position:relative;transform-origin:center" src="http://demo.somethingwhat.com/images/flower1.jpg" /> 
</div>

 js调用:

var $targetObj = $('#targetObj'); 
//初始化设置 
cat.touchjs.init($targetObj, function (left, top, scale, rotate) {}; 
//初始化拖动手势(不需要就注释掉) 
cat.touchjs.drag($targetObj, function (left, top) { }); 
//初始化缩放手势(不需要就注释掉) 
cat.touchjs.scale($targetObj, function (scale) { }); 
//初始化旋转手势(不需要就注释掉) 
cat.touchjs.rotate($targetObj, function (rotate) { });

以上所述是小编给大家介绍的touch.js 拖动、缩放、旋转 (鼠标手势)功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
jQuery插件autocomplete使用详解
Feb 04 #Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 #Javascript
原生js开发的日历插件
Feb 04 #Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 #Javascript
原生js实现打字动画游戏
Feb 04 #Javascript
js实现自定义路由
Feb 04 #Javascript
jQuery窗口拖动功能的实现代码
Feb 04 #Javascript
You might like
学习使用curl采集curl使用方法
2012/01/11 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP解决中文乱码
2017/04/28 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
python实现按日期归档文件
2021/01/30 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
农村党支部先进事迹
2014/01/14 职场文书
医生进修自我鉴定
2014/01/19 职场文书
运动会稿件100字
2014/02/21 职场文书
法学自荐信
2014/06/20 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
免职证明样本
2014/10/23 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android