Question

我正在创建一个平移和可缩放的UI，它需要一个子对象在屏幕上居中，但是我需要移动父对象使子对象在屏幕上居中。

我让代码以1倍的放大率工作但是当我应用css3变换来缩放父级时，我的计算结果出错了。

如果更改父元素css转换的第1和第4个元素，并将js mult var更改为0.5或2，则计算结束。

任何帮助都会受到赞赏，因为我已经把头发拉过来好几天了。

的Javascript

$(function() {

$("#child").click(function(e) {

var mult = 1

$("#parent").css('left',
  (($(window).width() - $("#parent").width()) / 2) +
  ($("#parent").width() * mult) / 2 -
  ($("#child").position().left / mult) -
  ($("#child").width() * mult) / 2
);

$("#parent").css('top',
  (($(window).height() - $("#parent").height()) / 2) +
  ($("#parent").height() * mult) / 2 -
  ($("#child").position().top / mult) -
  ($("#child").height() * mult) / 2
);

})

});

CSS

.parent {
  position: relative;
}

#child {
  border: 1px solid red;
  position: absolute;
  z-index: 3;
  width: 150px;
  height: 150px;
  top: 300px;
  left: 230px;
  background-color: cornflowerblue;
  color: white
}

#parent {
  position: relative;
  width: 700px;
  height: 900px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border: 1px solid red;
  background: pink
}

HTML

<div class="parent">
  <div id="parent">
    <div class="testBox" id="child">CLICK ME</div>
  </div>
</div>

Answer 1

好的，我通常不会写JS，但我得到了它的工作：

$(function() {

  $("#child").click(function(e) {

    var mult = 3

    $("#parent").css('left',
        (($(window).width()-$("#child").width()*mult) / 2) -
        $("#child").position().left +
        (mult-1) * $("#parent").width() / 2
    );

    $("#parent").css('top',
        (($(window).height()-$("#child").height()*mult) / 2) -
        $("#child").position().top +
        (mult-1) * $("#parent").height() / 2
    );
  })
});

以下是我认为可能让你感到困难的事情（他们为我做的）：

$("#child").position()在变换之后给出位置，而$("#child").width()在变换之前给出宽度。也就是说，使用您发布的CSS但transform: matrix(2, 0, 0, 2, 0, 0);然后$("#child").position().left == 460但$("#child").width() == 150。

设置$("#parent").css('left', ... )时，它是变换前的左偏移量，变换在中心周围缩放。也就是说，对于您发布的CSS，如果您想要将transform: matrix(1.5, 0, 0, 1.5, 0, 0);的左边缘与窗口的左边缘对齐，则使用#parent，那么您必须设置$("#parent").css('left', 175)而不是我最初预期的$("#parent").css('left', 0)。

定位父元素以使其在屏幕上居中

1 个答案: