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

Question

加载页面时有没有办法放大div？就像你在Chrome中安装新应用程序一样，它会将你带到新的选项卡页面并放大新应用程序。看起来不错。

有人知道如何使用jQuery做到这一点吗？

Answer 1

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

示例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);

Answer 2

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

也许jQuery有缩放插件。

Answer 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中运行。怪异：/