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.