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

Question

我希望实现在 metalabs 网站的图像转换器/ slider 上看到的效果:

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/ .