移動網站放大到谷歌地圖的圖像

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，你可以通過改變視口大小縮放。