我开始使用 HTML 5 应用程序。当我的页面加载时,我在屏幕中央有一个徽标。我需要屏幕中央的徽标才能开始。用户可以通过单击“开始”按钮开始使用该应用程序。发生这种情况时,我想以两种方式为徽标设置动画:
- 我希望徽标从其当前位置移动到左上角(顶部和左侧有一点填充)
- 我想缩小图像。
为了做到这一点,我正在使用 JQuery UI。这是我目前拥有的:
<body>
<div id="wrapper">
<div id="content">
<div id="logo"></div>
<input type='button' value='Begin' onclick='return beginButton_Click();' />
</div>
</div>
<div id="footer">
<span id="greeting" class="footer-content">
Hello
</span>
<span class="separator">|</span>
<a href="#" target="_blank" class="footer-content">View Status</a>
</div>
<script type='text/javascript'>
function beginButton_Click() {
$("#load").animate({
width: "30%",
height: "30%",
opacity: 0.4
}, 1500);
}
</script>
</body>
我的 CSS 在另一个文件中定义。我的 CSS 看起来像这样:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body, #footer {
background-color: #2D2D2D;
}
#wrapper {
width: 100%;
min-height: 100%;
margin-bottom: -34px;
background-color: #4cff00;
text-align: center;
overflow: auto;
}
#content {
margin-top: 200px;
width: 350px;
display: inline-block;
position: relative;
text-align: center;
margin-bottom: 30px;
}
#logo {
position: relative;
display: inline-block;
width: 100%;
height: 70px;
margin-bottom: 5px;
background: transparent url(/images/logo.png) no-repeat center center;
}
#footer {
text-align: left;
width: 100%;
overflow: hidden;
}
.footer-separator {
display: inline-block;
vertical-align: middle;
}
#info{
margin-left: 10px;
}
.footer-content, .action {
display: inline-block;
vertical-align: middle;
font-weight: normal;
}
目前,我的徽标 div 没有缩放或移动到左上角。我不知道如何移动 div,因为它相对定位。然而,我需要它在屏幕中间。除此之外,我不知道为什么 div 没有缩放。有人可以帮帮我吗?
谢谢!