jQuery 定位和动画

jQuery Positioning and Animation

本文关键字：动画 定位 jQuery      更新时间：2023-09-26

所以我有一段代码： 

jQuery.fn.center = function(parent) {
parent = this.parent();
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}

此代码抓取一个元素并将其移动到父元素的中心。效果很好。除了它正在做的事情之外，我还希望它做几件事。

  1. 我需要它浮动在该父级中的所有其他元素之上。或多或少的 z 索引。我尝试应用 z 索引，但它似乎不起作用。我不知道我是否做错了，或者是否有更好的方法。

  2. 我需要它回到它所处的位置。这种工作方式是，块将被定位在页面上（通过CSS），当用户点击时，它会将其移动到页面的中心，就像代码已经在做的那样。有没有办法，如果用户单击退出按钮，我可以对所述按钮进行编程以将其移回原来的位置？我不知道我是否可以在jQuery中传递变量。

  3. 这个选项更多的是为了美学，我认为没有必要，但如果你有一点额外的时间，我会喜欢它。我希望块从它的位置滑到页面的中心，然后再滑回来，而不仅仅是在那里弹出。正如我所说，这只是美学，我真的不需要这种情况发生。

非常感谢任何可以帮助我的人。

我试图实现类似的要求，但它应该具有您正在寻找的所有功能。试用演示

我需要它浮动在该父级中的所有其他元素之上。A z 索引 或多或少。我尝试应用 z 索引，但它似乎不起作用。 我不知道我是否做错了，或者是否有更好的 道路。

在这种情况下，我总是使用 1001 或更大范围内的 z-index。即使在演示中，它也能正常工作。试试这个，如果你仍然不为你工作，请告诉我们。

我需要它回到它所处的位置。这种工作方式， 块将放置在页面上（通过 CSS），以及何时 用户单击，将其移动到页面中心，因为代码是 已经在做。有没有办法，如果用户单击退出按钮， 我可以对所说的按钮进行编程以将其移回原来的位置吗？ 我不知道我是否可以在jQuery中传递变量。

我使用 API 存储了元素.data并在单击关闭（退出）按钮时将其恢复到原始位置。

这个选项更多的是为了美学，我认为没有必要，但是 如果你有一点额外的时间，会喜欢它。我想要块 从其位置滑动到页面中心，然后再向后滑动，如 而不是只是在那里弹出。正如我所说，这只是美学 我真的不需要这种情况发生。

您可以使用.animate而不是CSS，CSS将在指定时间内将元素从其原始位置超越到目标位置。

为了让它浮在所有其他元素之上，你需要使用 z-index，但你需要确保每个元素都已定位，并且每个元素都有一个z-index值开始，包括父元素。父母也需要定位。

为了恢复到原来的位置，你必须抓住他们当前的left和top偏移量。在 click 事件侦听器中，将元素移回其旧位置。

jQuery.fn.center = function(parent) {
  var oldTop = this.css('top');
  var oldLeft = this.css('left');
  parent = this.parent();
  this.css({
    "position": "absolute",
    "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
    "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
  });
  this.click(function(e) {
    this.css('top', oldTop);
    this.css('left', oldLeft);
  });
  return this;
}

为了执行动画（而不仅仅是跳转到位置），您可以使用 jQuery 对left和top值进行动画处理。

this.animate({
  'top': ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
  'left': ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});

编辑 您可能需要考虑使用 this.offset() .这将返回一个包含方法 left 和 top 的对象。

var offset = this.offset();
var oldTop = offset.top;
var oldLeft = offset.left;
相关文章：