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 相关文章推荐
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
node.js中watch机制详解
Nov 17 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 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实现Ftp用户的在线管理
2012/02/16 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
实例浅析js的this
2016/12/11 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
js验证密码强度解析
2020/03/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
详解基于django实现的webssh简单例子
2018/07/17 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python opencv实现简易画图板
2020/08/27 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
离婚协议书标准格式
2014/10/04 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers