js实现移动端手势放大缩小图片

//手势事件

var touchScale = function() {var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,one = false, $touch = $(".showDiv img"), //选择放大缩小的元素originalWidth = $touch.width(),originalHeight = $touch.height(),baseScale = parseFloat(originalWidth/originalHeight),imgData = [],bgTop = parseInt($(".showDiv img").css('top'));function siteData(name) {imgLeft = parseInt(name.css('left'));imgTop = parseInt(name.css('top'));imgWidth = name.width();imgHeight = name.height();}$(document).on('touchstart touchmove touchend', $(".showDiv img"), function(event){var $me = $(".showDiv img");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}};