6

主に css に依存する小さなツールチップ スクリプトを作成しようとしています。私が理解できない JavaScript のビットは、ブラウザーの端までの距離に基づいて div を配置する方法です。

divが表示されたら、上下左右にどれだけ近いかを確認したいと思います。たとえば、ツールチップ リンクの上に div を表示する十分なスペースがない場合は、リンクの下に配置する必要があります。

基本的に、divがその位置を「認識」し、それが表示されるようにするためにどこに行くべきかを知っていることを望みます。

ありがとう

4

3 に答える 3

5

ほろ酔いで使用するために、非常によく似たコードを自分で作成する必要がありました（したがって、私のソリューションではjQueryを使用します）。<div id="mydiv">...</div>作業しているdivがであると仮定して、これが基本的な計算です。右端と下端までの距離を測定するときも、divの高さと幅を考慮します。

dTop、、、およびはdBottom、それぞれdivの上端、下端、左端、および右端からビューポートの同じ端までの距離です。divの左上隅に基づいて測定する場合は、減算しないでください。またはを計算するときに。dLeftdRightdTopdLeftdBottomdRight

var $doc = $(document),
    $win = $(window),
    $this = $('#mydiv'),
    offset = $this.offset(),
    dTop = offset.top - $doc.scrollTop(),
    dBottom = $win.height() - dTop - $this.height(),
    dLeft = offset.left - $doc.scrollLeft(),
    dRight = $win.width() - dLeft - $this.width();
于 2010-07-28T18:59:21.013 に答える
1

ヘルプについては、測定要素の寸法と位置を参照してください

于 2009-02-02T17:17:25.930 に答える
0

このPrototype ライブラリのチート シートには、良い例があります。

于 2009-02-02T17:27:33.023 に答える