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 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php mysql数据库操作分页类
2008/06/04 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php上传图片类及用法示例
2016/05/11 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python调用飞书发送消息的示例
2020/11/10 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
个人担保书格式范文
2014/05/12 职场文书
欢迎领导标语
2014/06/27 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
六一活动主持词
2015/06/30 职场文书
幼儿园心得体会范文
2016/01/21 职场文书