JavaScript/HTML/CSS : Zooming

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;
}

如果您需要支持比 9 更旧的 IE 版本，则使用此工具生成 .zoomedIn2x:

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

如果您想更动态地执行此操作(例如其他级别的缩放)，请改为使用 cssSandpaper .