jquery移动端缩放图片

在移动设备上，图片缩放是常见的功能。而使用jQuery来实现图片缩放，能够提高用户体验和使网页更加酷炫。下面将介绍如何使用jQuery进行移动端图片缩放。

// 获取图片元素
var img = document.getElementById('myImage');
// 初始化参数
var scale = 1;
var lastScale = 1;
var startX = 0;
var startY = 0;
var lastX = 0;
var lastY = 0;
var moveFlag = false;
// 绑定touchstart事件
img.addEventListener('touchstart',function (event) {
    event.preventDefault();
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    moveFlag = true;
},{ passive: false })
// 绑定touchmove事件
img.addEventListener('touchmove',function (event) {
    event.preventDefault();
    if (event.touches.length >= 2) {
        var distance = Math.sqrt(Math.pow(event.touches[0].pageX - event.touches[1].pageX,2) + Math.pow(event.touches[0].pageY - event.touches[1].pageY,2));
        scale = lastScale + (distance - lastDistance) / 100;
        img.style.transform = 'scale(' + scale + ')';
    } else if (moveFlag) {
        var deltaX = event.touches[0].pageX - startX;
        var deltaY = event.touches[0].pageY - startY;
        img.style.transform = 'translate(' + (lastX + deltaX) + 'px,' + (lastY + deltaY) + 'px) scale(' + scale + ')';
    }
},{ passive: false })
// 绑定touchend事件
img.addEventListener('touchend',function (event) {
    event.preventDefault();
    lastScale = scale;
    lastX += (event.changedTouches[0].pageX - startX);
    lastY += (event.changedTouches[0].pageY - startY);
    moveFlag = false;
},{ passive: false })

jquery移动端缩放图片

以上代码实现了图片的缩放、平移功能。其中，touchstart事件处理函数记录了当前手指的位置，touchmove事件处理函数根据手指位置的变化计算缩放比例和平移距离，touchend事件处理函数更新上一次缩放比例和平移距离。

如果需要限制缩放范围，可以增加判断条件并改变scale值。如果需要在缩放过程中加入动画效果，可以使用jQuery的animate()方法。

相关推荐