2

私は Web プログラミングの初心者です。

Facebookのようなものを実装したいのですが、マウスをリンクの上に置くと、リンクに固定されている矢印フローティングdivがその上に表示されます。

皆さんは、この種のコンポーネントにどのように対処していますか? 私が見つけた最も近いライブラリはhttp://gristmill.github.com/jquery-popbox/です。一部のブラウザでは、これが機能しないことがあります。「Popbox」をさらに検索しても、有用な結果は表示されません。私が投稿したリンクのような同様のライブラリを誰かが推奨できますか? Jquery、Javascript、CSS、html などを使用できます。

ライブラリを使用する代わりに、最も簡単な方法で、ライブラリを使用せずにそれを行う方法を誰かに教えてもらえますか? 背後にある大まかなアイデアを知りたいだけです。ほとんどのライブラリには複雑なコードが付属しており、初心者が習得するのは困難です。

よろしくお願いします。

4

2 に答える 2

3

この動作デモを確認してください: http://jsfiddle.net/fedmich/Aapw6/

ポップアップ ボックスの上部と中央に矢印のイメージを作成し、通常はポップアップ ボックスを移動してターゲット アンカーをたどる必要があります。

$('.hover').hover(function(){
        var popup_div = $('.popup_div');
        var obj = $(this);
        var offset = obj.offset();

        var new_top = offset.top + 30;

        var new_left = offset.left;

        new_left = new_left - ( popup_div.width() / 2);
        new_left = new_left + ( obj.width() / 2);

        popup_div.css('left', new_left + 'px');
        popup_div.css('top', new_top + 'px');

        popup_div.show();
    }
    , function (){
        //hovered away so hide popup
        $('.popup_div').hide();
    }
    );

CSSコードは絶対位置にする必要があります

.popup_div{
    position:absolute;
    left:100px;
    top:100px;
    border:1px solid red;
    background-color:blue;
    width:150px;
    height:150px;
    background:url("http://i.imgur.com/zFWft.png") no-repeat scroll center 0 transparent;
    text-align:left;
}

これは、ターゲット div の位置を取得し、幅を半分に分割して左に追加することで中心を取得することで実行できます。

    new_left =  hovered_thing.left + (hovered_thing.width / 2) - (popup_div.width / 2)

ホバーカードを試したことがありますか？やりたいことと似ているかもしれません

http://designwithpc.com/Plugins/Hovercard

于 2012-11-19T09:50:32.453 に答える
1

jquery ui はダイアログ機能を提供します

ポップアップを表示および非表示にするアンカーバインドがあるという背後にあるアイデア

$('#anchor').bind({
    'mouseenter' : function() {
        $('#popUp').show();
    },
    'mouseleave' : function() {
        $('#popUp').hide();
    }
});

ポップアップの位置を設定する必要があります。ポップアップ div 表示が none でない場合にのみ、$('#popup').outerWidth()/2および$('#anchor').outerWidth() /2 ...を使用できることに注意してください。

于 2012-11-19T09:52:21.567 に答える