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;varcurrentScale;

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手势缩放,touch.js 拖动、缩放、旋转 (鼠标手势)(示例代码)相关推荐

  1. php vue联动查询,使用vue.js实现联动效果的示例代码

    摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...

  2. html5 jquery 鼠标拖动例子,jquery实现鼠标拖动实现DIV排序示例代码

    先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文://www.jb51.net/article/42087.htm html部分: 指标: 注:可以通 ...

  3. android div拖动排序,鼠标拖动实现DIV排序示例代码

    先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:https://www.jb51.net/article/42087.htm html部分: 指标: ...

  4. php实现打字效果,JS实现的打字机效果示例代码

    这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现的打字机效果.分享给大家 ...

  5. oracle 对话框怎么写,Node.js使用对话框ngDialog的示例代码

    做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景,有一个基于AngularJS的扩展模块可以帮我们优雅地完成这类事情:ngDialog. ngDialog在github上 ...

  6. html5 银行卡号校验,js 实现 银行卡号 格式验证 示例代码

    [实例简介] [实例截图] [核心代码] function formatBankNo (BankNo){ if (BankNo.value == "") return; var a ...

  7. html获取get信息,在HTML页面用JS获取Get参数方法(示例代码)

    这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: function GetReques ...

  8. html 苹果微信录音js,微信js-sdk 录音功能的示例代码

    需求描述 制作一个H5页面,打开之后可以录音,并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 ...

  9. js+html代码设置,HTML+JS = 网站注册界面源代码(示例代码)

    本注册页面未设置编码方式和兼容性,已测试,在Chrome浏览器显示正常 注册页面 }.pg_header .logo{margin:0 auto;float:left;width:200px;text ...

最新文章

  1. 进一步认识golang中的并发
  2. Oracle 表的创建 及相关參数
  3. mysql 历史版本下载
  4. Hadoop入门(六)Mapreduce
  5. 【C++ Primer | 16】std::move和std::forward、完美转发
  6. 外连接就是允许不满足条件的字段查询出来
  7. c语言函数大全doc,c语言函数大全.doc
  8. Chrome浏览器中的【开发者工具】---只对当前窗口有效---每个窗口都可以打开一个【开发者工具】
  9. EF 保证线程内唯一 上下文的创建
  10. 【数据库原理实验(openGauss)】数据库的备份与恢复
  11. 闲话: 恭喜园子里的MVP一下, 同时问所有奋斗在技术领域的兄弟过节好~
  12. letex编辑输出】pdf文件嵌入字体embedded fonts的问题
  13. [UNIX]The UNIXHATERS Handbook
  14. html5游戏视频UI框架,几款流行的HTML5 UI 框架比较
  15. 网易评论真搞笑~~~呵呵
  16. dll占的究竟是谁的空间?——浅谈Windows内存机制
  17. php 单笔转账到支付宝账户,php实现单笔转账到支付宝功能
  18. 绘制地图格网时,如何只显示度的数值
  19. vim 指令 删除所有内容
  20. mysql 批量更新和单条更新(循环)

热门文章

  1. 2021中国农业生产数字化研究报告 附下载
  2. java word批注_创建自己的Java批注
  3. python apply函数的用法_Python pandas.DataFrame.apply函数方法的使用
  4. 3.网页信息解析方法:Xpath与BeautifulSoup
  5. 一分钟应对勒索病毒WannaCry
  6. [软件应用]奇怪,发现Firefox可以支持开启QQ临时会话链接
  7. Python的函数drop_duplicates参数说明
  8. Unity 支持的模型格式及详细介绍
  9. Java版数独算法实现
  10. 【Ajax ,Axios的应用】