如何使用 jQuery 在页面加载时放大 div？答案

【问题标题】：How to zoom a div in on page load with jQuery?如何使用 jQuery 在页面加载时放大 div？
【发布时间】：2011-08-16 11:58:37
【问题描述】：

有没有办法在页面加载时使 div 放大？就像您在 Chrome 中安装新应用一样，它会将您带到新标签页并放大新应用。看起来不错。

有谁知道如何用 jQuery 做到这一点？

【问题讨论】：

标签： jquery

【解决方案1】：

这是一种使用 jQuery 进行缩放的方法

example jsfiddle

在您的 CSS 中设置起始尺寸（以及使用 top 和 left 的位置偏移）：

#zoom-box {
    background: #7d7e7d;
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
    border-radius:10px;
    width:0;
    height:0;
    position:relative;
    top:150px;
    left:150px;
    border:solid 4px yellow;
    font-size:0;
    line-height:0;
    vertical-align:middle;
    text-align:center;
    color:#fff;
}

然后使用 jQuery animate() 方法调整所有内容

$('#zoom-box').animate({
    width:'300px',
    height:'300px',
    top:'0',
    left:'0',
    'font-size':'50px',
    'line-height':'300px'
}, 1000);

【讨论】：

哇！这完美地工作。谢谢 :) 有没有办法让背景图像用它来调整大小？像这个 div 有一个背景图像，它不会调整大小。我可以添加什么来使背景图像也增长吗？（它就像已经是大小和 div 只是增长但它看起来并不那么好。）
如果您使用<img> 元素，您可以在缩放时调整图像大小，通过将宽度设置为example fiddle 来查看此100%... 实际上使用CSS3，您可以将background-size 设置为@ 987654333@ 以及 example fiddle 但不确定哪些浏览器支持（在 Chrome 14 中测试/工作）
谢谢。它实际上已经是<img>，但带有背景图像。原因是当用户尝试右键单击并保存它时，他们保存的是blank.gif，而不是实际的图像。我可能会将其更改为常规的<img>，因为遗憾的是，IE 8 用户很可能会查看该站点。我希望 IE 可以像普通浏览器一样与 CSS 兼容。无论如何，非常感谢您的帮助！这将使网站看起来真的很好。顺便说一句，网站是weebuild1.yolasite.com 我正在放大的图像是监视器。
经过一段时间的小帮助，它应该被重置为正常状态，并且应该为此旋转我应该怎么做

【解决方案2】：

您需要放大 DIV 内的所有内容，例如图像、增加文本大小等...

也许有 jQuery 的缩放插件。

【讨论】：

【解决方案3】：

CSS：

div {
    width:50px;
    height:50px;
    margin:20px;
    background-color:red;
    font-size:1em;
}

.big {
    width:100px;
    height:100px;
    font-size:2em;
}

JQuery（带有 JQueryUI）：

$(function(){
      $('#my_div').addClass("big",500).removeClass("big",500);
});

这是演示：http://jsfiddle.net/tjRvn/

很遗憾addClass() 今晚无法在 Chrome 中运行。奇怪：/

【讨论】：