0

Quora では、ユーザー名/画像の上にマウスを重ねると、常にウィンドウ表示領域内にあるカードがポップアップします。画面サイズに合わせて位置が調整されます。

たとえば、これらのQuora のスクリーンショットでは、最初の画像は画面の解像度が高い場合、2 番目の画像は拡大した場合です。ホバー カードは最初は右側に表示されますが、2 回目は左側に表示されます。

どうすればこれを実装できますか?

4

1 に答える 1

0

これを行うには、ポップアップの左の位置と幅、および画面の幅を見て、2 つを比較します。次に、ポップアップの左の位置にポップアップの幅を加えたものが画面の幅より大きい場合、ポップアップの左の位置を画面の幅からポップアップの幅を引いた値に設定します。わかる？実装 (これはたまたま jQuery ですが、アイデアはわかります...):

    function adjustPos(menu) {
        var menuHeight = $('#' + menu).outerHeight();
        var bodyHeight = $(window).height();
        if ((menuY + menuHeight) > bodyHeight) {
            menuY = bodyHeight - menuHeight;
        }
        var menuWidth = $('#' + menu).outerWidth();
        var bodyWidth = $(window).width();
        if ((menuX + menuWidth) > bodyWidth) {
            menuX = bodyWidth - menuWidth;
        }
    }

高さについても行う必要があることを忘れないでください。

于 2013-04-29T09:23:14.170 に答える