猿问

移动端如何实现图片通过捏合手势放大缩小呢?

想要实现移动端网页图片根据捏合手势放大缩小图片,该如何去实现呢?

呼啦一阵风
浏览 3551回答 1
1回答

互换的青春

/*            * @Author 兔爷            * @function 实现单指拖动图片,双指缩放图片            * @marks 参数one是为了区分屏幕上现在是一根手指还是两根手指,因为在滑动的时候两根手指先离开一根会触发一根手指移动图片位置这个方法            */            var touchScale = function(seletor, bg) {                var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,                    one = false,                     $touch = $(seletor),                    originalWidth = $touch.width(),                    originalHeight = $touch.height(),                    baseScale = parseFloat(originalWidth/originalHeight),                    imgData = [],                    bgTop = parseInt($(bg).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', $(seletor).parent().selector, function(event){                    var $me = $(seletor),                        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)/baseScale,                                'left' : imgLeft,                                'top' : imgTop                            });                                                    }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                }            };            这是我之前写的单指拖动,双指缩放的js代码,希望对你有所帮助,用前请调用jquery。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答