如何使用jQuery放大页面加载中的div? [英] How to zoom a div in on page load with jQuery?

问题描述

在页面加载时是否可以进行div放大?就像在Chrome中安装新应用程序一样，它会将您带到新标签页并放大新应用程序.看起来不错.

Is there a way to make a div zoom-in when the page loads? Like when you install a new app in Chrome, it brings you to the new tab page and zooms in the new app. It looks nice.

有人知道如何使用jQuery吗?

Anyone know how to do this with jQuery?

推荐答案

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

here's one way to zoom with jQuery

示例jsfiddle

在CSS中设置起始尺寸(以及使用top和left的位置偏移):

set starting sizes (and position offset with top & left) in your CSS:

#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()方法调整所有内容的大小

then size everything up with a jQuery animate() method

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

这篇关于如何使用jQuery放大页面加载中的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！