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閉じる（終了）ボタンをクリックすると元の位置に戻しました。

このオプションは美学のためのものであり、私はそれが必要であるとは思わないが、少し余分な時間があればそれを望んでいる。ブロックをその位置からページの中央にスライドさせて、そこにポップするのではなく、元に戻したいのですが。私が述べたように、これは単なる美学であり、私は本当にそれが起こる必要はありません。

CSSの代わりに使用できます.animate。これは、指定された時間内に要素を元の位置から宛先の位置に超越します。

于 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 に答える