手机端 图片的移动缩放旋转兼容touch
//缩放
var initialScale = 1;
var currentScale = 1;
touch.on('#target', 'pinch', function (ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > 1.5 ? 1.5 : currentScale;
currentScale = currentScale < 0.5 ? 0.5 : currentScale;
this.style.webkitTransform = 'scale(' + currentScale + ')' + ' ' + 'rotate(' + totalAngle + 'deg)';
this.style.webkitTransition = 'all ease 0.05s';
});
//旋转
var angle = 0;
var totalAngle = 0;
touch.on('#target', 'rotate', function (ev) {
totalAngle = angle + ev.rotation;
if (ev.fingerStatus === 'end') {
angle = angle + ev.rotation;
}
this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)' + ' ' + 'scale(' + currentScale + ')';
});
//拖拽,第二个为true是背景图拖拽
var fBindDrag = function (obj, outmove) {
var obj = $(obj);
var pt = obj.parent();
var xy = null; obj.xy();
touch.on(obj[0], 'touchstart', function (ev) {
if (true) { xy = { x: obj[0].offsetLeft, y: obj[0].offsetTop } }
// ev.preventDefault();
});
var dx, dy;
touch.on(obj[0], 'drag', function (ev) {
dx = dx || 0;
dy = dy || 0;
var offx = dx + ev.x;
var offy = dy + ev.y;
var nx = xy.x + offx, ny = xy.y + offy;
if (outmove) {
if (nx > 0) {
nx = 0;
}
if (nx + obj[0].offsetWidth < pt[0].clientWidth) {
nx = pt[0].clientWidth - obj[0].offsetWidth;
}
if (ny > 0) { ny = 0; }
if (ny + obj[0].offsetHeight < pt[0].clientHeight) {
ny = pt[0].clientHeight - obj[0].offsetHeight;
}
} else {
if (nx < 0) {
nx = 0;
}
if (nx + obj[0].offsetWidth > pt[0].clientWidth) {
nx = pt[0].clientWidth - obj[0].offsetWidth;
}
if (ny < 0) { ny = 0; }
if (ny + obj[0].offsetHeight > pt[0].clientHeight) {
ny = pt[0].clientHeight - obj[0].offsetHeight+32;
}
}
obj.css("left", nx + "px");
obj.css("top", ny + "px");
});
touch.on(obj[0], 'dragend', function (ev) {
// dx += ev.x;
// dy += ev.y;
});
}
//背景图缩放,uploadImg为背景框
var fScale = function (obj) {
var obj = $(obj);
var target = obj[0];
var pt = obj.parent();
//target.style.webkitTransition = 'all ease 0.05s';
var ox, oy, ow, oh;
touch.on($("#uploadImg")[0], 'touchstart', function (ev) {
ox = target.offsetLeft;
oy = target.offsetTop;
ow = target.clientWidth;
oh = target.clientHeight;
// ev.preventDefault();
});
var initialScale = 1;
var currentScale;
touch.on($("#uploadImg")[0], 'pinch', function (ev) {
currentScale = ev.scale - 1;
var mw = target.clientWidth;
var mh = target.clientHeight;
var xywh = { x: 0, y: 0, w: 0, h: 0 };
xywh.w = ow * ev.scale;
if (xywh.w < pt[0].clientWidth) {
xywh.w = pt[0].clientWidth;
}
xywh.h = xywh.w * mh * 1.0 / mw;
if (xywh < pt[0].clientHeight) {
xywh.h = pt[0].clientHeight;
xywh.w = xywh.h * mw / mh;
}
xywh.x = ox - (xywh.w - ow) / 2;
xywh.y = oy - (xywh.h - oh) / 2;
if (xywh.x > 0) { xywh.x = 0; }
if (xywh.y > 0) { xywh.y = 0; }
if (xywh.x + target.offsetWidth < pt[0].clientWidth) {
xywh.x = 0;
}
if (xywh.y + target.offsetHeight < pt[0].clientHeight) {
xywh.y = 0;
}
index = 0;
obj.css({ left: xywh.x + 'px', top: xywh.y + 'px', width: xywh.w + 'px' });
});
touch.on($("#uploadImg")[0], 'pinchend', function (ev) {
});
}
手机端 图片的移动缩放旋转兼容touch的更多相关文章
- 手机端图片插件可缩放 旋转 全屏查看photoswipe
官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- 手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- css——手机端图片正确显示
这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下 左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...
- js动态改变图片热区坐标,手机端图片热区自适应
<img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...
- js手机端图片弹出方法
1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...
- iphone手机端图片错位修正的js代码
<script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...
- Html5 手机端网页不允许缩放
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- RecyclerView添加头部和底部视图的实现方法
引用-- http://www.zhimengzhe.com/Androidkaifa/15072.html 在天下货crm----签到---签到记录中有使用
- centos永久修改主机名
永久修改主机名 以上的修改只是临时修改,重启后就恢复原样了. 步骤1: 修改/etc/sysconfig/network中的hostname vi /etc/sysconfig/network HOS ...
- linux系统管理--查看进程
关于进程的查看,大家都不会陌生 ,主要是ps和pstree命令. ps aux 查看系统中所有进程,使用BSD操作系统格式.(注意:不是ps -aux) 执行结果 USER :该进程是由哪个用 ...
- C# 特性(Attribute)
个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...
- 《HelloGitHub》第 14 期
公告 欢迎通过在 GitHub 上新建 issues 方式推荐项目,我真心希望读者可以在 HelloGItHub,找到真正的编程乐趣! <HelloGitHub>第 14 期 兴趣是最好的 ...
- 再谈PHP错误与异常处理
博客好久没有更新了,实在惭愧,最近在忙人生大事,哈哈!这段时间没有看什么新的东西,结合项目中遇到的PHP异常处理问题,我又重新梳理了之前模糊的概念,希望对大家理解PHP异常处理有所帮助. 请一定要注意 ...
- 构建自己的PHP框架--构建模版引擎(2)
自从来到新公司就一直很忙,最近这段时间终于稍微闲了一点,赶紧接着写这个系列,感觉再不写就烂尾了. 之前我们说到,拿到{{ $name }}这样一段内容时,我们只需要将它转化成<?php echo ...
- Edison与Arduino通过USB对接通信
虽然Edison本身就装在一块Arduino扩展板上,但当要接的传感器太多了的时候一个扩展板也不够用了.因此需要再用一Arduino板扩展功能.而两者需要通信才能达到一个整体的效果,因此这里介绍如何用 ...
- IntelliJ IDEA 2017.1.4 x64配置说明
只是为了研究下idea这款编译器怎么使用.开门见山,说下如何配置这款编译器,不配置也能用,但是强迫症表示不服.下面直入正题: 下载与安装就不说了,除了更改安装目录外,没啥注意的地方,建议下载idea去 ...
- JavaScript严格模式有什么不同
看ES6,瞄到“严格模式”,问了下自己什么是“严格模式”?答案好像不是很明朗,遂总结如下: 严格模式声明:“use strict”; 1.禁止变量未声明就赋值 2.限制动态绑定(属性和方法归属哪个对象 ...