touch.js 拖动、缩放、旋转 (鼠标手势)
可以实现手势操作:拖动、缩放、旋转。封装好的脚本方法是这样的:
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 拖动、缩放、旋转 (鼠标手势)的更多相关文章
- iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)
iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) 1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手势操作移动设备的重要特征,极大的增加 ...
- ios iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)
iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) 转自容芳志大神的博客:http://www.cnblogs.com/stoic/archive/2013/02/27/2940 ...
- 【转】iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) -- 不错不错
原文网址:http://blog.csdn.net/totogo2010/article/details/8615940 1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手 ...
- 百度touch的手势框架,touch.js
今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除. 它是百度团队开发的,现在由百度云Clouda进行维护. 官网 http://touch.c ...
- touch.js——常见应用操作
touch.js--常见应用操作 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时 ...
- touch.js下载使用方式
touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...
- touch.js - 移动设备上的手势识别与事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
- touch.js——手机端的操作手势
TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指 ...
- 前端学习之touch.js与swiper学习
Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...
随机推荐
- Day1:html和css
Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...
- Python学习笔记【第九篇】:Python面向对象基础
Python语言中一切皆对象(类.属性.方法.........) 概念 面向对象编程:Object Oriented Programming 简称OOP 面向对象程序设计 面向对象和面向过程都是解决问 ...
- git知识整理
概述 工作中使用git进行代码托管,一开始只知道git add commit,之后了解了git-flow插件,觉得超牛逼,一键生成feature分支,再后来听说原生git命令更好用,于是又去学了原生g ...
- 在Java里>、>>、>>>的含义
在java中: >表示大于,如:if(a>b)...结果是boolean类型 >>表示右移,如:int i=15; i>>2的结果是3,移出的部分将被抛弃. 转为二 ...
- 运行 Spring Boot 应用的 3 种方式
今天介绍 3 种运行 Spring Boot 应用的方式,看大家用过几种? 你所需具备的基础 什么是 Spring Boot? Spring Boot 核心配置文件详解 Spring Boot 开启的 ...
- Excel 斜线表头制作方法
Excel 斜线表头制作方法
- Java高阶回调,回调函数的另一种玩法
工具类package com.sctek; import java.lang.reflect.Field; import android.os.CountDownTimer;import androi ...
- odoo开发笔记 -- self详解
python中一切皆对象! odoo基于python开发,那么odoo中也可以理解成一切皆对象. 我们在python中定义类的时候,一般会用到self,用来表示当前对象自己. 那么odoo中的self ...
- border-image属性把边框的背景设置为图片
一.浏览器对它的支持Firefox3.5-Firefox15 需要加-moz-前缀Firefox15以上 同样支持-moz-前缀的css代码,但是必须在css代码中加 ...
- 经典中的品味:第二章 C++基本的对象,类型和值(上)
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 自律,是以积极而主动的态度,去解决人生的痛苦~ 上一章,我们大谈了Hel ...