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 回答