2

この質問はやや関連しているようです

しかし、まだ完全ではありません。これが重要です。私は小さなギャラリーを書いていて、ある時点でユーザーがサムネイルをクリックします。画像の大きいバージョンは、フルスクリーンの内部として表示されます。ここまでは順調ですね。マウスをその上に置くと、3つの画像が表示されます。閉じる、左、右、アルバム内を移動するためのものです。マウスが画像またはナビゲーション画像を離れると、3つのナビゲーション画像がフェードします。

これらの3つのナビゲーション画像は、メイン画像と部分的に重なっています。たとえば、閉じる画像は左上隅の円です。そして、それはトリッキーな部分です。

マウスがメイン画像から横に移動するか、メイン画像から3つの小さな重なり合う画像のいずれかに移動するたびに、mouseleaveがトリガーされます。mouseenterは、期待どおりに重なり合う小さな画像ごとにトリガーします。

ただし、これによりファンキーな点滅効果が作成されます。これは、メイン画像のマウスリーブ時に3つの小さな画像をhide（）するためです。これにより、オーバーラップし、マウスがメイン画像の上にあるため、メイン画像のmouseenterがすぐにトリガーされます。

これを回避するために、メイン画像をマウスで離れたときに、マウスが重なり合っている小さな画像の1つに移動したかどうかを確認しようとしました。そのために、私はこのコードを使用しました：

main_img.mouseleave(function() {
  if (!hoverButtons()) {
    doHideButtons();
  }
});

function hoverButtons() {
  return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}

これはSafariとChromeでうまく機能しますが、画像がまだ点滅しているFFとIEでは機能しません。投稿をさらにいじくり回すと、「：hover」は適切なセレクター式ではなく、CSS疑似クラスであるため、ここで問題になっているようです。

さまざまな画像をマウス入力/マウスリーブするときにオン/オフを切り替えるスイッチを操作しようとしましたが、イベントが異なる順序でトリガーされるように見えるため、どちらも機能しません。

どうすればこれを行うことができますか？ありがとう！

編集：明確にする必要があるかもしれません：ナビゲーションボタンが表示される前に、メイン画像の位置に応じて配置するために、それぞれの左属性と上属性を設定します。つまり、jQueryセレクターで.show（）を呼び出す前に、いくつかの作業を行う必要があります。新しい関数.placeShow（）を追加しようとしましたが、$（ "。nav-button：hidden"）。placeShow（）のようなセレクターに関してはうまくいきませんでした。

4

2 に答える 2

2

あなたはこれで試すことができます：

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});

デモ

于 2012-05-18T06:54:15.287 に答える
1

これが私がやったことです。スライドショーで使用する画像は4つあります。メイン画像と、左、右、閉じるボタンの画像です。

main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");

ここのクラスは基本的に空ですが、上記の回答に基づいて選択するのに役立ちます。メイン画像はナビゲーションボタンなしで表示され、次のイベントハンドラー関数を添付します。

$(".slide-show").mouseenter(function() {
  $(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
  $(".photo-nav").hide();
});

placeShow（）は、ナビゲーションボタンをそれぞれの場所に移動します。この関数は次のように定義されています。

$.fn.placeShow = function() {
  var pos = main_img.position();
  var left = pos.left;
  var top = pos.top;
  var width = main_img.width();
  var height = main_img.height();

  close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
  left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
  right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}

これはこれまでSafari、IE、FF、Chromeで機能しました（まあ、私がここに持っているバージョンは...）

このコードをもっとトリミングできるかどうか、またはよりエレガントで高速な代替ソリューションがあるかどうか、あなたの考えを教えてください。これらすべての最終結果は、現在私のWebサイトにあります。

イェンス

于 2012-05-19T15:46:27.080 に答える