锤击JS平移不移动图像

Hammer JS panning not moving image

本文关键字：移动 图像 JS 锤击      更新时间：2023-09-26

我想出了以下脚本（基于此处和网络上的答案）来捏/缩放和移动缩放的图像。它将进行放大/缩小，但不会移动调整大小的图像。document.write 脚本永远不会执行，即使代码看起来非常好。我错过了一些明显的东西吗？

$(image).hammer().on('pinch', function(event) {
    var photo = $(this);
    newWidth = photo.width() * event.gesture.scale;
    newHeight = photo.height() * event.gesture.scale;
    // Convert from screen to image coordinates
    var x;
    var y;
    x -= offset.left + newX;
    y -= offset.top + newY;                                     
    newX += -x * (newWidth - width) / newWidth;
    newY += -y * (newHeight - height) / newHeight;
    photo.css('transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");      
    wrap.css('transform', "translate3d("+newX+"px, "+newY+"px, 0)");
    width = newWidth;
    height = newHeight;
// Reset pinch
}).on('pinchout',function(event){
    photo.css('transform', "translate3d(0,0,0)");
// Start of moving zooming
}).on('pan panstart', function(event){
    photo.css('transform', "translate3d("+event.gesture.deltaX+"px, "+event.gesture.deltaY+"px, 0) ");                  
    document.write('ending panning 1');
// End of moving
}).on('pan panend', function(event){
    photo.css('transform', "translate3d(0,0,0)");
    panX += event.gesture.deltaX/zoom;
    panY += event.gesture.deltaY/zoom;
    wrap.css({left: panX,top: panY});
    document.write('ending panning 2');
})

var hammer = new Hammer(/** DOM Element **/); hammer.on(/** Your Script **/);

编辑：Ya实例化了Hammer.js错误。请注意，我编写了 DOM Element，它似乎与 JQuery 引用的元素不太正确。

相关文章：