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 Hover

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

jQuery Hover

＆＃13;

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

＆＃13;

#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 */
}

＆＃13;

<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>

＆＃13;

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

1 个答案: