JavaScript/HTML/CSS：縮放

Question

假設我有一個帶div的頁面和一個按鈕。當你點擊按鈕時，div應該放大。換句話說，如果這個div是100px，那麼當你縮放時，它應該變成200px。而這個div的所有孩子也應該增加一倍的大小。

這樣做的最好方法是什麼？

我的理解是，有一個CSS zoom，但只在IE中 - 它不是任何CSS標準的一部分。

Answer 1

您應該使用CSS3的transform: scale()。

參見：http://jsfiddle.net/Favaw/ - （我用的jQuery爲了方便，但它不是必需的）

.zoomedIn2x { 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    -o-transform: scale(2); 
    -ms-transform: scale(2); 
    transform: scale(2); 

    -moz-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 

如果您需要支持舊版本的IE比9，然後使用這個工具產生.zoomedIn2x ：

• http://www.useragentman.com/IETransformsTranslator/index.html

如果您想要更動態地執行此操作（例如其他級別的縮放），請改爲使用cssSandpaper。

Answer 2

你可能要考慮的jQuery插件Zoomooz：http://janne.aukia.com/zoomooz/