jQuery:如何让一个居中的div在居中的同时充满整个屏幕？
jQuery:如何让一个居中的div在居中的同时充满整个屏幕？
提问于 2011-08-23 18:02:04
我正在尝试动画一个div来填满整个屏幕，然后再返回到原来的大小。然而，当我让div填充屏幕时，它不是从中心开始动画，而是从右上角开始。此外，当我最小化它时，它不会返回到起始位置，而是返回到左上角。
我有jsfiddle code here。我试图让它从中心的起始点流畅地动画，充满屏幕，然后向后回到开始的位置，就像一开始一样。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-23 23:09:34
另一种不使用pinouchon使用的额外div的方法。jsFiddle is here：
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
d.width = "100%";
d.height = "100%";
isFullscreen = true;
$("h1").slideUp(speed);
}
else{ // MINIMIZATION
d.width = "300px";
d.height = "100px";
isFullscreen = false;
$("h1").slideDown(speed);
}
$("#controls").animate(d,speed);
}
</script>
<style>
#controls{
width:300px;
height:100px;
margin: auto auto auto auto;
}
body, html{
height:100%;
}
</style>
</head>
<body>
<h1 align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="background-color:green;" align="center">
<input type='button' value='fullscreen' onclick='fullscreen();' />
</div>
</body>
</html>Stack Overflow用户
发布于 2011-08-23 18:49:02
我建议您移动的div始终以position: relative;为中心，并包含在带有position: absolute;的div中，并且以this way为中心。
下面是您想要的一个工作示例：http://jsfiddle.net/FP2DZ/。
Stack Overflow用户
发布于 2011-08-23 20:14:05
我想这就是你想要的：
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
d.width = "100%";
d.height="100%";
d.left="0%";
d.top="0%";
d.marginLeft="0px";
$("#controls").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.left="50%";
d.top="50%";
d.marginLeft="-150px";
$("#controls").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
#controls{
width:300px;
height:100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<h1 align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="background-color:green;" align="center">
<input type='button' value='fullscreen' onclick='fullscreen();' />
</div>
</body>
</html>但我想我来晚了一点;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7159291
复制相关文章
相似问题
腾讯云开发者
