如何在不改变位置的情况下更改div的宽度/高度？
我想复制这家伙做的但不使用画布。我想有一个div在我的页面的中心，并简单地增加宽度/高度/边界半径10px每秒。这工作得很好，但是由于某种原因，div越大，它向右下方移动的越多。圆圈不是静止不动的，它的中心位置随着它变大而改变。如何在不改变位置的情况下更改div的宽度/高度？
main.css
div {
background-color: green;
width: 100px;
height: 100px;
border-radius: 100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
index.html
<!DOCTYPE html>
<head>
<title>CircleTime</title>
<link rel="stylesheet" href="main.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div></div>
</body>
</html>
APP咖啡
incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
$(document).ready ->
window.circle = $("div")
setInterval(incrementCircle, 1000);
共有2个答案
你也在改变页边距吗？
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
只需将此添加到IncrementCircle中
circle.css 'margin', -(newSize/2) + 'px, 0px, 0px, ' + -(newSize/2) + 'px'
在你的coffeescript中，像这样不断更新页边距：
incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
circle.css 'margin-top', newSize/-2
circle.css 'margin-left', newSize/-2
$(document).ready ->
window.circle = $("div")
setInterval(incrementCircle, 1000);
http://jsfidle.net/sw0zn36e/5/
-
我正在尝试习惯使用自动布局和约束的动画，而不是使用帧的动画。在我的项目中，我在屏幕顶部附近有一个UIView，我正试图直接向下（y位置）设置动画。我知道我必须修改约束常量值，但这样做会降低视图的高度，而不是像我想要的那样向下“推”视图。这是我的代码： 顶部约束是视图控制器视图顶部和视图之间的垂直空间约束。 的其他约束包括： > 水平间距 垂直空间（
-
问题内容： 如果我有： 然后 会拉伸以填充该空间。我希望图像保持相同大小，但是要在DOM中占用那么多空间。我是否必须添加封装或？我讨厌添加样式标记。 问题答案： 是的，您需要一个封装div： 与类似： 其他解决方案（填充，边距）比较繁琐（因为您需要根据图像的尺寸计算正确的值），但也不能有效地使容器小于图像。 同样，上述内容可以更容易地适用于不同的布局。例如，如果您希望图像位于右下角：
-
我想知道如何将高度设置为
-
我正在尝试从组件更新（添加，删除）查询参数。在angularJS中，由于： 我有一个应用程序，其中包含用户可以过滤，排序等列表，我想在url的查询参数中设置所有激活的过滤器，以便他可以复制/粘贴URL或与其他人共享。
-
我目前正在进行FreecodeCamp的第一次测试，所以我的问题可能是愚蠢的。我想把#Titles的行高改小一点，同时保持它的背景色。可能是显示元素，但我想不出该怎么做。另外，我想去掉我的图像周围的白线，就在边界之前... https://jsfiddle.net/deffciu/hrna0lfs/欢迎任何帮助
-
编辑：codesandbox:https://codesandbox.io/s/40xj3zv5w7上的示例，图像变得非常小，而不是400px宽和10px高。