JavaScript / HTML / CSS：缩放 [英] JavaScript/HTML/CSS: Zooming

问题描述

假设我有一个带有div的页面和一个按钮。当您点击按钮时，div应该放大。换句话说，如果div是100px，当你缩放时，它应该变成，例如，200px。

这是最好的方法是什么？

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

解决方案

您应该使用CSS3的 <$ c $ //jsfiddle.net/Favaw/\">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以上， c $ c> .zoomedIn2x 使用此工具：

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

如果您想要更动态地执行此操作（例如其他级别的缩放），请改用 cssSandpaper 。

Let's say I've got a page with a div, and a button. When you click the button, the div should be zoomed in on. In other words, if that div was 100px, when you zoom, it should then become, say, 200px. And all the children of this div should also be doubled in size.

What's the best way to do this?

My understanding is that there's a CSS zoom, but only in IE--it's not part of any CSS standard.

解决方案

You should use CSS3's transform: scale().

See: http://jsfiddle.net/Favaw/ - (I used jQuery for convenience, but it's not a requirement)

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

If you need to support older versions of IE than 9, then generate .zoomedIn2x using this tool:

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

If you want to do this more dynamically (such as other levels of zoom), then instead use cssSandpaper.

这篇关于JavaScript / HTML / CSS：缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！