一个收缩展开效果菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个收缩，展开效果</title>
<style type="text/css">

</style>
</head>
<body>
<script language="JavaScript">

var divheight =100;
var speed=11;

var i=0;
var s;

var p=0;

function big(n){
if(document.getElementById("bbb"+n).offsetHeight<11){

i=0;
inc(n);

}
else if(document.getElementById("bbb"+n).offsetHeight>divheight){

p=divheight;

inc2(n);

}

}
function inc(x){

i=i+10;
document.getElementById("bbb"+x).style.height=i+"px";

if(i>divheight){

i=divheight-5;

}
var s=setTimeout("inc("+x+")",speed);
if(i==95){
window.clearTimeout(s);

}

}
function inc2(x){
if(p>1){
p=p-10;
document.getElementById("bbb"+x).style.height=p +"px";

}
var s=setTimeout("inc2("+x+")",speed);
if(p==0){

window.clearTimeout(s);
}
}
</script>
<div class="abslut" onclick="big(1)" id="botton1">栏目一</div>
<div class="bb" id="bbb1">123123123123</div>
<div class="abslut" onclick="big(2)" id="botton2">栏目二</div>
<div class="bb" id="bbb2">234423</div>
<div class="abslut" onclick="big(3)">栏目三</div>
<div class="bb" id="bbb3">24234</div>
<div class="abslut" onclick="big(4)">栏目4</div>
<div class="bb" id="bbb4">24234</div>
</body>
</html>
<center></center>

posted on 2009-07-19 09:25 晴天1848 阅读(469) 评论(0) 收藏举报