在javascript中，或者使用jQuery插件，来完全缩放一个div及其内容？

Question

我希望在metalabs网站的图像转换器/滑块上看到这样的效果：

http://metalabdesign.com/

我让它工作了，但问题是我没有使用图像，我在缩放一个包含内容的div。动态内容可能会发生变化。有没有一种方法可以把整个div及其内容都炸掉，因为手动缩放div中的每个元素是一件非常麻烦的事情。

我目前正在使用jQuery动画缩放一个div：

启动css：

#tagBox {
    display: none;
    width: 1280px;
    height: 1000px;
    position: absolute !important;
    left: 50% !important;
    margin-left: -640px;
    top: 50% !important;
    margin-top: -500px;
    opacity: 0;
}

更改它的jQuery。

$('#tagBox').show().animate({
    opacity: 1,
    width: 700,
    height: 500,
    marginLeft: '+=275px',
    marginTop: '+=250px'
}

但这只是div的动画。div的内容固定在右上角。我正在寻找一种模仿动画的方法，但只是将div作为一个整体进行缩放，所有元素放在一起，最好是在普通的javascript中。

谢谢!

Answer 1

您可以使用css3转换。

-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);

检查它- http://jsfiddle.net/6gJka/2/。