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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 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代码
2010/08/08 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python实现定时任务
2017/02/08 Python
Python代码太长换行的实现
2019/07/05 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
祖国在我心中演讲稿
2014/01/15 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
人事代理委托书
2014/09/27 职场文书
学习计划是什么
2019/04/30 职场文书