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/