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

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) { });

转载地址:http://blog.csdn.net/somethin...
touch官网地址:https://www.awesomes.cn/repo/...

touch.js 拖动、缩放、旋转 (鼠标手势)的更多相关文章

  1. iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)

    iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)       1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手势操作移动设备的重要特征,极大的增加 ...

  2. ios iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)

    iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) 转自容芳志大神的博客:http://www.cnblogs.com/stoic/archive/2013/02/27/2940 ...

  3. 【转】iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) -- 不错不错

    原文网址:http://blog.csdn.net/totogo2010/article/details/8615940 1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手 ...

  4. 百度touch的手势框架,touch.js

    今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除. 它是百度团队开发的,现在由百度云Clouda进行维护. 官网   http://touch.c ...

  5. touch.js——常见应用操作

    touch.js--常见应用操作 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时 ...

  6. touch.js下载使用方式

    touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...

  7. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

  8. touch.js——手机端的操作手势

    TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指 ...

  9. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

随机推荐

  1. Mysql数据库异常

    1. Mysql数据库异常 1.1. 数据库问题之Got error 28 from storage engine 原因首先检查磁盘是否已满,df -h一下 很可能是日志数据过大,查看该目录下文件夹和 ...

  2. java 常见面试题总结(一)

    1.Redis应用场景 答:分布式会话,分布式锁,计数器,缓存,消息队列,排行榜,最新列表. 2.如何访问一个类的私有方法? 答:使用反射进行访问,代码如下: package cn.entity; p ...

  3. Python爬虫目录

    Python爬虫目录 工具使用 Pycharm 连接Linux 远程开发 mongodb在windows下安装启动 爬虫抓包工具Fiddle设置 爬虫抓包工具Charles设置 爬虫工具fiddle在 ...

  4. Unity 5 使用Roslyn编译器支持C# 7

    Unity 2017可选使用新的Mono编译器,支持.NET 4.6和C# 6,解决bug的同时,代码优化更佳. Unity 5可以使用社区开源方案:https://bitbucket.org/ale ...

  5. Android--Service之AIDL传递复杂对象

    前言 Android的AIDL不仅可以在绑定服务中传递一些Android规定的数据类型的数据,还可以传递一些复杂类型的数据.但是与传递系统允许的数据类型相比,复杂类型数据的传递要做更多的工作,本篇博客 ...

  6. 微信小程序:防止多次点击跳转(函数节流)和防止表单组件输入内容多次验证(函数防抖)

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...

  7. 微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执 ...

  8. Chapter 4 Invitations——10

    "Mr. Cullen?" the teacher called, seeking the answer to a question that I hadn't heard. “C ...

  9. Appcan开发笔记:导出Excel文件

    Appcan IDE为4.0+; appcan提供了导出文件的方法 appcan.file.write 文件会自动创建,要解决的事情是Excel用字符串输出,可以考虑 csv(逗号间隔).HTML.X ...

  10. mysql服务器架构

    mysql是最广泛使用的开源数据库之一,作为后端开发人员,或多或少都会和mysql打交道,本篇文章会从sql查询语句的执行过程,来介绍mysql的服务器架构, 查询的过程大致分为从客户端到服务器,在服 ...