1

所以我有一段代码：

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-index，但它似乎不起作用。我不知道我是否做错了，或者是否有更好的方法。

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

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

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

4

2 回答 2

2

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

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

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

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

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

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

您可以使用.animateCSS 代替 CSS，它将在指定时间内将元素从原始位置超越到目标位置。

于 2012-04-09T18:35:32.630 回答
1

为了让它漂浮在所有其他元素之上，你是对的，你需要为此使用 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;
于 2012-04-09T18:34:20.810 回答