假设我有一个带有div和一个按钮的页面。当您单击按钮时,div应该放大。换句话说,如果该div为100px,则在缩放时应变为200px。并且该div的所有子级也应加倍。

最好的方法是什么?

我的理解是,有一个CSS zoom,但仅在IE中-它不是任何CSS标准的一部分。

最佳答案

您应该使用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

10-05 20:51
查看更多