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

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. 页面css样式找不到问题

    出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...

  2. SVN密码找回 完美方案

    问题背景 SVN(Subversion)版本管理工具.本文以Windows操作系统下使用SVN的场景. 长时间不使用SVN,可能会出现忘记了SVN密码的尴尬局面.那么,该如何找回SV密码呢? 处理思路 ...

  3. 纯 Html 5的 简单 TreeView 保存下思路以后有机会再完善。

    details p{margin-left:30px;}details.root details{margin-left:13px;} </style> <details class ...

  4. Jexus~mono中使用StackExchange.redis的问题

    在windows平台的vs里,添加包包时,可以选择StackExchange.redis,而如果你的应该程序需要部署到linux的mono环境上,使用这个StackExchange.redis是不行的 ...

  5. vue 关于数组和对象的更新

    在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...

  6. 浅谈Mybatis连接原理

    众所周知数据库连接的过程,但是最近面试的人(菜面菜),都说用的SSM框架,但是我问了一下,mybatis是怎么连接上mysql的,基本上都会说:配置好的,直接用了,今天我来抛砖引玉一下,欢迎拍砖! 什 ...

  7. ZooKeeper系列(2):ZooKeeper命令行工具zkCli.sh

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk 1.简介 ZooKeeper提供了一个非常简单的命令行客户端zk ...

  8. python变量和变量赋值的几种形式

    动态类型的语言 python是动态类型的语言,不需要声明变量的类型. 实际上,python中的变量仅仅只是用来保存一个数据对象的地址.无论是什么数据对象,在内存中创建好数据对象之后,都只是把它的地址保 ...

  9. CNN大战验证码

    介绍   爬虫江湖,风云再起.自从有了爬虫,也就有了反爬虫:自从有了反爬虫,也就有了反反爬虫.   反爬虫界的一大利器,就是验证码(CAPTCHA),各种各样的验证码让人眼花缭乱,也让很多人在爬虫的过 ...

  10. popupWindow设置后完美解决返回键响应无效的方案以及popupWindow背景透明方案

    // 点击其他地方消失 viewPuwAddNew.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouc ...