移动网站放大图像，如谷歌地图

Question

我有一个移动网站，我喜欢插入带有手势缩放选项的图像。它应该看起来像您在谷歌地图上放大，以便其他内容始终具有相同的大小并且只有图像在放大。是否有任何脚本？还是我必须使用 iframe？

问候

米克

Answer 1

对于手势部分，您可以使用hammer.js 之类的库来处理捏合事件。你可以找到它HERE

对于缩放，您可以使用 css 转换将图像（或 div）与页面的其余部分分开。在下面的演示中，单击放大和缩小按钮会更改 CSS 比例转换值。在您的情况下，您将处理捏合事件并相应地更改比例。

注意：根据以下 Omar 的评论更新。

<div id="imgContainer" >
    <img id="zoomImage" src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2003/10/soho_image_28_october_2003/10098404-2-eng-GB/SOHO_image_28_October_2003_node_full_image.jpg" />
<div>

#imgContainer{
    overflow: auto;
    height: 400px;
}

$(document).on("click", ".zoomBtn", function(){    
    var id = $(this).prop("id");
    if (id == 'in'){
        curScale *= 1.25;
    } else {
        curScale *= 0.75
    }        
    $("#zoomImage").css({
      "transform": "scale(" + curScale  + ")"
    });
});

这是一张 jQM 放大图 DEMO

注意：如果您在 SVG 画布上使用 SVG，则可以通过更改视口大小来进行缩放。