如何使用jQuery实现这个很酷的弹出div效果？

当你点击页面上的图标http://www.mansory.com/en/dealers你会发现一个div弹出显示一些信息。我只是无法弄清楚他们如何使用css/jQuery的东西来实现效果。效果的机制是什么？如何使用jQuery实现这个很酷的弹出div效果？

来源

2013-01-07 josh kugler

他们使用的机制，他们默认使弹出ul'显示：无'，当你点击任何链接使用jquery它添加任何类说'悬停'，并为该类添加CSS是'li.hovering li.innermost ' –

[Fire a reveal modal]（http://www.zurb.com/playground/reveal-modal-plugin）。 –

首先在浏览器控制台中查看元素css，当它显示时以及隐藏时......会为您提供很多线索。经常可以看到实况动画css的变化......至少在Firebug中你可以 – charlietfl

这种机制被称为动画。他们只是显示/隐藏div，并不断改变弹出窗口的位置。

多见于

我做一个简单的演示here

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: [email protected] <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-07 02:58:08 phnkha

{top：50}在这里表示什么？您将顶部属性设置为400px，那么{top：50}是什么？ –

啊，这意味着Top会在200毫秒内从400变为50 – phnkha

他们只是显示/隐藏一个div并将其绝对置于页面顶部。看看编号为infobox的div，您将看到所有需要执行此操作的CSS。 infobox里面已经有不同国家的文字了，每个文字都有一个div，属性display:none。根据您点击的国家/地区，他们会将相应的div上的显示属性更改为block，其余的则将其更改为display:none。

来源

2013-01-07 02:48:30

如何使用jQuery实现这个很酷的弹出div效果？

回答

相关问题