圖像縮放效果？

Question

想象一下遠處看起來很遠的一組圖像，無論您點擊什麼，它都會使用鼠標X，Y作爲定位點縮小距離。所以基本上所有的圖像，不管它們是如何排列的（可能在不同的DIV中），都可以無縫放大，就好像相機放大了拼圖一樣。

我在想如何在jQuery中完成這個操作時遇到問題。任何建議？ CSS3動畫轉換也許？注意：變焦時必須完全保留圖像質量

Answer 1

這是一個相當新的標準，但使用CSS的zoom屬性，您可以放大頁面內容甚至特定元素，只需一點點JavaScript。

本示例將在單擊頁面時擴展wrapper元素及其所有內容。

<div id="wrapper"> 

    <div id="someContent"></div> 
    <img src="img.png" /> 

</div> 

<script> 

    document.body.addEventListener 
    ("click", function(){zoom(document.getElementById("wrapper"))}, true); 

    function zoom(elem) { 

     var zAtt = parseFloat(elem.style.zoom); 
     if(isNaN(zAtt)) zAtt = 100; 

     zAtt+=4; 

     console.log(zAtt); 
     console.log(elem); 

     elem.style.zoom = zAtt + "%"; 


    } 

</script>