Question

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

格雷茨

Mik的

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，则可以通过更改视口大小进行缩放。

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

1 个答案: