0

http://www.mansory.com/en/dealersページのアイコンをクリックすると、いくつかの情報を表示するdivがポップアップ表示されます。css/jQueryのものを使用して彼らがどのように効果を上げたかを理解することはできません。効果のメカニズムは何ですか？

4

2 に答える 2

3

このメカニズムはアニメーションと呼ばれます。divを表示/非表示にし、ポップアップの位置を継続的に変更します。

詳細については、http：//api.jquery.com/animate/をご覧ください。

ここで簡単なデモを作成します

HTML：

<div class='container'>
    <button id="btnShow">Show</button>
    <div class='menu' style='display: none'>
        <button id="btnHide">Close</button><br/>
        Ernst-Heinkel-Strasse 7,<br/>
        DE-71394 Kernen i.R. Germany<br/>
        Contact <br/>
        Telefon: 07151 / 994 64 -0<br/>
        Fax: 07151 / 994 64 -22<br/>
        www.herceg.com <br/>
        email: info@herceg.com <br/>
    </div>
</div>

JS：

$(document).ready(function(){
    $('#btnShow').click(function(){
        $('.menu').show().css("top", "400px").animate({top: 50}, 200);
    });

    $('#btnHide').click(function(){
        $('.menu').hide();
    });
});

CSS：

.container {
    with: 400px;
    height: 300px;
    border: 1px solid black;
}

.menu {
    position: absolute;
    border: 1px solid black;
    background: #fff;
    left: 180px
}
于 2013-01-07T02:58:08.990 に答える
0

divを表示/非表示にして、ページの真上に配置するだけです。IDのあるdivを見ると、infoboxこれを行うために必要なすべてのcssが表示されます。中にinfoboxは、すでにさまざまな国のすべてのテキストがあり、それぞれがプロパティを持つdivで囲まれていますdisplay:none。クリックした国に応じて、表示プロパティがblock対応するdivおよびdisplay:noneその他すべてに変更されます。

于 2013-01-07T02:48:30.960 に答える