jquery - onmouseover show div x と y の調整

Question

ページにいくつかの小さな画像があり、マウスオーバーすると画像の横に div が表示されます。ここまでは順調ですね。ただし、画像がページの下部にある場合は、画像の下ではなく上に div を表示したいと思います。基本的に私がやろうとしているのは、画像がどこにあるかを確認することです。下部にある場合は、代わりに画像の上に div を表示します。左側に div を表示するために画像を右マージンに近づける場合も同じです。

これを達成する簡単な方法を知っている人はいますか？

乾杯

Answer 1

あなたのコードを見ないと、それを行う「正しい」方法を提案するのは少し難しいですが、次の方法を試してみます (JQuery 構文を使用):

まず、「しきい値」を計算します。これは、その下に表示したい最低点ですdiv。おそらくこれを行う最も簡単な方法は、$(document).height()X ピクセルを使用して減算することです。

次に、ホバー時に、画像がページ上のどこにあるかを計算します。でこれを行うことができます.offset();。

画像の上部がしきい値よりも高い場合はdiv下に表示し、そうでない場合は上に表示しdivます。

注: ページの設定方法によっては、読み込み時にそれぞれの位置を計算し、しきい値を下回る位置にクラスを適用し、それを使用して対応する位置をdiv正しく配置することができます。