0

アイデアで実験中です。インライン画像を含む HTML テキストのブロックがあります。一部の画像には、(私が思うに) フライアウトがあります。つまり、画像にカーソルを合わせると、左側にコントロール パネルが表示されます。将来的には、コントロール パネルは表示モードの切り替え、画像サイズの変更などを行う予定です。今のところ、表示させたいだけです。マウスが画像またはコントロール パネルから離れると消えます。

jQuery UI には便利な " position " 関数があり、これは私が望んでいることをほぼ正確に実行します。

Safari 5.0.1 で使用すると、最初は機能しますが、その後のマウスオーバーにより、同じデルタのように見える部分だけコントロール パネルが徐々に移動します。position() がパネルに毎回オフセットを適用するように見えますが、固定/静的位置に移動すると予想していました。

Firefox 3.6.7 で使用すると、画像とコントロール パネルの間に 1 ピクセルのギャップがあります。img と div を完全に揃えたいのですが、これが位置のポイントだと思いました。

毎回正しい位置に移動するにはどうすればよいですか? そして、このテクニックは「フライアウト」、「フライオーバー」または他の用語と呼ばれますか?

これが私のコードです

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
  border: 1px solid green;
  position: absolute;
  display: none;
}
img {
  border: 1px solid blue;
}
</style>
</head>

<body>
<div class="flyover">*</div>

<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script>

var is_shown = 0;

var check_for_close = function () {
  if (!is_shown) {
    $(".flyover").hide();
  }
};

// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
  is_shown = 0;
  setTimeout(check_for_close, 0.0);
};

$(document).ready(function () {
 $("img").mouseenter(function() {
   $(".flyover").position({my: "right top",
                            at: "left top",
                            of: $("img")});
    $(".flyover").show();
   is_shown = 1;
  }).mouseleave(check_exit);

  $(".flyover").mouseenter(function() {
    is_shown = 1;
  }).mouseleave(check_exit);
});
</script>
</body> </html>
4

1 に答える 1

0

これが「すでに修正されているがリリースされていないjQueryコアのバグ」であることを示唆するjqueryフォーラムスレッドを見つけました。Safariの問題の回避策があります.nmyvisionのコメントを使用し、位置を呼び出す前に毎回位置をリセットします.

$(...).css({left:0,top:0}).position({ ... });

Firefox ではまだ 1 ピクセルずれていますが、別の方法で回避します。

于 2010-09-12T03:01:44.980 に答える