我有一个简单的代码，可以从中心水平和垂直扩展 div，
但它只扩展到左侧或底部，我希望它从中心扩展到两侧（左=50px，右=50px）或（顶部=50px，底部=50px），总计等于100px。
这里是代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
opacity: 0.6,
}, 1500 );
});
</script>
</body>
谢谢。
这个怎么样？
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
CSS
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 0px;
left: 0px;
margin-left: 50%;
margin-top: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
jQuery
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
top: "-50px",
left: "-50px",
opacity: 0.6,
}, 1500 );
});
http://jsfiddle.net/theguywholikeslinux/87f4Y/ http://jsfiddle.net/theguywholikeslinux/87f4Y/
我使用 margin-left 和 margin-top 进行居中，并对 top: 和 left: 值进行动画处理，使框向上、向左、向下和向右生长。
如果您希望“Hello”也保留在框的中心，您可能需要添加一些额外的 CSS。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
