js：窗口从上掉下来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery 个性翻牌效果的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
ul,li{list-style:none;padding:0;margin:0;}
#btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;}
#btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;}
#btncell li a{display:block;height:28px;border:2px solid #333;text-decoration:none;width:50px;background:#888;overflow:hidden;position:absolute;left:25px;top:10px;}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/js/poker.js"></script>
</head>
<body>
<input type="button" value="挂牌" onclick="BoxDown(1)" /><input type="button" value="单挑模式" onclick="BoxDown(2)" /><input type="button" value="坐庄模式" onclick="BoxDown(3)" />
<div id="box1" style="position:absolute;visibility:hidden;left:250px;top:100px;width:700px;height:500px;background-color:#F5F5F5">
<div align="right"><a href="javascript:MissBox(1)">[关闭窗口] </a></div>挂牌操作框架。
</div>
<div id="box2" style="position:absolute;visibility:hidden;left:250px;top:100px;width:700px;height:500px;background-color:#F5F5F5">
<div align="right"><a href="javascript:MissBox(2)">[关闭窗口] </a></div>1：1单挑框架。
</div>
<div id="box3" style="position:absolute;visibility:hidden;left:250px;top:100px;width:700px;height:500px;background-color:#F5F5F5">
<div align="right"><a href="javascript:MissBox(3)">[关闭窗口] </a></div>1：N坐庄框架。
</div>
</body>
</html>
<script>
function BoxDown(i){
var bouncelimit=32 //(必须是8的整除)
for(var j=1;j<4;j++){
document.getElementById("box"+j).style.visibility="hidden";
}
var obj=document.getElementById("box"+i);
var boxHeight=obj.clientHeight;
var crossobj=obj.style;
var scroll_top=document.documentElement.scrollTop;
this.initbox=function(){
crossobj.top=scroll_top-boxHeight+"px";
crossobj.visibility="visible";
dropstart=setInterval("dropin()",25);
}
this.dropin=function(){
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+"px";
else{
clearInterval(dropstart);
bouncestart=setInterval("bouncein()",50);
}
}
this.bouncein=function(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+"px";
if (bouncelimit<0)
bouncelimit+=8;
bouncelimit=bouncelimit*-1;
if (bouncelimit==0){
clearInterval(bouncestart);
}
}
initbox();
}
function MissBox(i){
document.getElementById("box"+i).style.visibility="hidden";
}
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。<ul id="btncell">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</body>
</html>
