var touchScale = function () {
var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,
one = false,
$touch = $("#largeshow"), //选择放大缩小的元素
originalWidth = $touch.width(),
originalHeight = $touch.height(),
baseScale = parseFloat(originalWidth / originalHeight),
imgData = [],
bgTop = parseInt($("#largeshow").css('top'));
function siteData(name) {
imgLeft = parseInt(name.css('left'));
imgTop = parseInt(name.css('top'));
imgWidth = name.width();
imgHeight = name.height();
}
console.log('放大图片')
$(document).on('touchstart touchmove touchend', $("#largeshow"), function (event) {
var $me = $("#largeshow");
touch1 = event.originalEvent.targetTouches[0], // 第一根手指touch事件
touch2 = event.originalEvent.targetTouches[1], // 第二根手指touch事件
fingers = event.originalEvent.touches.length; // 屏幕上手指数量
//手指放到屏幕上的时候,还没有进行其他操作
if (event.type == 'touchstart') {
if (fingers == 2) {
// 缩放图片的时候X坐标起始值
startX = Math.abs(touch1.pageX - touch2.pageX);
one = false;
} else if (fingers == 1) {
x1 = touch1.pageX;
y1 = touch1.pageY;
one = true;
}
//siteData($me);
}
//手指在屏幕上滑动
else if (event.type == 'touchmove') {
if (fingers == 2) {
// 缩放图片的时候X坐标滑动变化值
endX = Math.abs(touch1.pageX - touch2.pageX);
scale = endX - startX;
$me.css({
'width': originalWidth + scale,
'height': originalWidth + scale //如果图片被拉伸了可以把这句去掉,让图片自适应
});
} else if (fingers == 1) {
x2 = touch1.pageX;
y2 = touch1.pageY;
// if (one) {
// $me.css({
// 'left' : imgLeft + (x2 - x1),
// 'top' : imgTop + (y2 - y1)
// });
// }
}
}
//手指移开屏幕
else if (event.type == 'touchend') {
// 手指移开后保存图片的宽
originalWidth = $touch.width(),
siteData($me);
imgData = [[imgLeft, imgTop - bgTop, imgWidth, imgHeight], [0, 0, 640, 640]];
}
});
var getData = function () {
return imgData;
};
return {
imgData: getData
}
};
使用方法 在需要的地方调用touchScale()
注意图片高宽度不能写死