根据自己的大小和当前偏移量动态更改元素偏移量

Question

我在 DIV 中有一个元素。如下图...

<div id="parent">
    <div id="child"></div>
</div>

通常在孩子改变大小（缩放）时将孩子居中放在父母中间，我会这样做......

$('#child').resizable({
        resize:function(){
            // this extends the left/top offset while width increases
            $('#child').css({
                left:$('#parent').width()/2 - $('#child').width()/2,
                top:$('#parent').height()/2 - $('#child').height()/2
            })
        }
    });

上面的例子工作得很好，但是当我调整孩子的大小时，它总是从同一个点开始，而不是孩子的偏移量。

但是现在我需要像上面的示例一样调整孩子的左上角偏移量，但这次不是基于父级的大小而是基于孩子的确切偏移量及其大小。

Answer 1

我建议你使用transform 和transform-origin。

transform 使用它所应用的元素自己的属性，而不是父元素。

CSS 悬停

#parent {
  height: 200px;
  background: lightgray;
}
#child {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100px;
  padding: 30px;
  background: red;
  text-align: center;
  transition: transform 0.5s;
  transform: translate(-50%,-50%);
  transform-origin: center top;        /* which origin to scale from */
}
#child:hover {
  transform: translate(-50%,-50%) scale(1.5);
}

<div id="parent">
    <div id="child">Hover me</div>
</div>

jQuery 悬停

$(document).ready(function() {
  $("#child").hover(function() {
    $(this).css("transform", "translate(-50%,-50%) scale(1.5)");
  }, function() {
    $(this).css("transform", "translate(-50%,-50%)");
  });
});

#parent {
  height: 200px;
  background: lightgray;
}

#child {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100px;
  padding: 30px;
  background: red;
  text-align: center;
  transition: transform 0.5s;
  transform: translate(-50%, -50%);
  transform-origin: center top;          /* which origin to scale from */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
  <div id="child">Hover me</div>
</div>