<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="sheneyan" />
<script type="text/javascript">
var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
function toggle(o){
if (!o.tid)o.tid = "_" + math.random() * 100;
if (!window.toggler)window.toggler = {};
if (!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
maxheight:o.offsetheight,
minheight:mh,
timer:null,
action:1
};
}
o.style.height = o.offsetheight + "px";
if (window.toggler[o.tid].timer)cleartimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = settimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0){
if (o.offsetheight <= t.minheight){
cleartimeout(t.timer);
return;
}
}
else{
if (o.offsetheight >= t.maxheight){
cleartimeout(t.timer);
return;
}
}
o.style.height = (parseint(o.style.height, 10) + t.action * step) + "px";
window.toggler[id].timer = settimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentnode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="xx"><h5 onclick="toggle(this.parentnode)">伸缩效果</h5>
<p>sdf容</p>
<p>sdf容</p>
<p>sf容</p>
<p>sfd容</p>
</div>
</body>
</html>
一打开网页是收缩的
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="sheneyan" />
<script type="text/javascript">
var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
var caiying2007=202//最大高度
window.onload=function init(){
var obj_init=document.getelementsbytagname("div")
for (var oi=0;oi<obj_init.length;oi++){
if (obj_init[oi].classname=="xx"){obj_init[oi].style.height=mh + "px";}
}
}
function toggle(o){
if (!o.tid)o.tid = "_" + math.random() * 100;
if (!window.toggler)window.toggler = {};
if (!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
// maxheight:o.offsetheight,
maxheight:caiying2007,
minheight:mh,
timer:null,
action:-1
};
}
o.style.height = o.offsetheight + "px";
if (window.toggler[o.tid].timer)cleartimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = settimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0){
if (o.offsetheight <= t.minheight){
cleartimeout(t.timer);
return;
}
}
else{
if (o.offsetheight >= t.maxheight){
cleartimeout(t.timer);
return;
}
}
o.style.height = (parseint(o.style.height, 10) + t.action * step) + "px";
window.toggler[id].timer = settimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{border:solid 1px;overflow:hidden;height:200px}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentnode);" >伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="xx"><h5 onclick="toggle(this.parentnode)">伸缩效果</h5>
<p>sdf容</p>
<p>sdf容</p>
<p>sf容</p>
<p>sfd容</p>
</div>
<script>
</script>
</body>
</html>
慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style>
body{
margin:0px;
font:normal 12px 宋体;
background: #999999;
}
table{border:0px;}
td{font:normal 12px 宋体; }
img{vertical-align:middle; border:0px;}
.sec_menu{border-left:1px solid #808080; border-right:1px solid #808080;
border-bottom:1px solid #808080; overflow:hidden; background:#ffcc99;}
.menu_title{background-color: #cc6600}
.menu_title span{color:#ffffff;}
.menu_title2{background-color: #ff9900}
.menu_title2 span{color:#c8c8c8; }
.showtitle{position:relative; top:-2px; left:-6px; border:1pt solid #c3d4e7;
z-index:0; height:26; background-color: #0080c0; padding-top:5; padding-left:5}
.alp{filter: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,
finishx=250,finishy=85}
.txt1{font-size:9pt; color:#cccccc;}
</style>
<script language="javascript">
<!--
function menushow(menuid,maxh,menuid2,arrow){
if(menuid.style.pixelheight<maxh) {
menuid.style.pixelheight+=maxh/20;
menuid.filters.alpha.opacity+=5;
arrow.innerhtml="<font face=webdings>6</span>"
if(menuid.style.pixelheight==maxh/10)
menuid.style.display="block";
mymenuid=menuid;
mymaxh=maxh;
mymenuid2=menuid2;
myarrow=arrow
settimeout("menushow(mymenuid,mymaxh,mymenuid2,myarrow)","5");
}
}
function menuhide(menuid,maxh,menuid2,arrow){
if(menuid.style.pixelheight>0) {
if(menuid.style.pixelheight==maxh/20)
menuid.style.display="none";
menuid.style.pixelheight-=maxh/20;
menuid.filters.alpha.opacity-=5;
arrow.innerhtml="<font face=webdings>4</span>"
mymenuid=menuid;
mymaxh=maxh
mymenuid2=menuid2;
myarrow=arrow
settimeout("menuhide(mymenuid,mymaxh,mymenuid2,myarrow)","5");
}
else
if(whichcontinue)
whichcontinue.click();
}
function menuchange(menuid,maxh,menuid2,arrow){
if(menuid.style.pixelheight){
menuhide(menuid,maxh,menuid2,arrow);
whichopen="";
whichcontinue="";
}
else
if(whichopen) {
whichcontinue=menuid2;
whichopen.click();
}
else
{
menushow(menuid,maxh,menuid2,arrow);
whichopen=menuid2;
whichcontinue="";
}
}
function mm_preloadimages() { //v3.0
var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new array();
var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexof("#")!=0){ d.mm_p[j]=new image; d.mm_p[j++].src=a[i];}}
}
//-->
</script>
<title>cattom</title>
<link href="link.css" rel="stylesheet" type="text/css">
</head>
<script language="javascript">
nereidfadeobjects = new object();
nereidfadetimers = new object();
function nereidfade(object, destop, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //提取串值
settimeout("nereidfade("+object+","+destop+","+rate+","+delta+")",0);
return;
}
cleartimeout(nereidfadetimers[object.sourceindex]);
diff = destop-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destop){
direction = -1;
}
delta=math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destop){
nereidfadeobjects[object.sourceindex]=object;
nereidfadetimers[object.sourceindex]=settimeout("nereidfade(nereidfadeobjects["+object.sourceindex+"],"+destop+","+rate+","+delta+")",rate);
}
}
</script>
<body>
<script language=javascript>
var whichopen=menutitle1;
var whichcontinue="";
</script>
<div id="layer1" style="position:absolute; left:0px; top:350px; width:111px; height:102px; z-index:1">
<table cellpadding=0 cellspacing=0 width=150
style="border-top:1pt solid black">
<tr style="cursor:hand;">
<td height=18 class=menu_title onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'"
id=menutitle1 onclick="menuchange (menu1,120,menutitle1,arrow1);"> <span><span id=arrow1><font face="webdings">4</span>
::动漫同人志::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(opacity=0);display:none;" id=menu1>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20><a href="rhdm.htm">:::日韩动漫:::</a></td>
</tr>
<tr>
<td height=20><a href="gtdm.htm">:::港台动漫:::</a></td>
</tr>
<tr>
<td height=20><a href="dldm.htm">:::大陆动漫:::</a></td>
</tr>
<tr>
<td height=20><a href="ycdm.htm">:::原创动漫:::</a></td>
</tr>
<tr>
<td height=20><a href="yqlj.htm">:::友情链接:::</a></td>
</tr>
</table></div></td></tr></table>
<table cellpadding=0 cellspacing=0 width=150
style="border-top:1pt solid black">
<tr style="cursor:hand;">
<td height=18 class=menu_title onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'"
id=menutitle2 onclick="menuchange (menu2,120,menutitle2,arrow2);"> <span><span id=arrow2><font face="webdings">4</span>
::动漫音乐::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(opacity=0);display:none;" id=menu2>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20><a href="rhdmyy.htm">::日韩动漫音乐::</a></td>
</tr>
<tr>
<td height=20><a href="gtdmyy.htm">::港台动漫音乐::</a></td>
</tr>
<tr>
<td height=20><a href="dldmyy.htm">::大陆动漫音乐::</a></td>
</tr>
<tr>
<td height=20><a href="dmyyk.htm">::动漫音乐库::</a></td>
</tr>
<tr>
<td height=20><a href="wydb.htm">:::网友点播:::</a></td>
</tr>
</table></div></td></tr></table>
<table cellpadding=0 cellspacing=0 width=150
style="border-top:1pt solid black; border-bottom:1pt solid black;">
<tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'"
id=menutitle3 onclick="menuchange(menu3,140,menutitle3,arrow3);">
<span><span id=arrow3><font face="webdings">4</span>
::网页123::</span></td></tr><tr><td>
<div class=sec_menu style="width:150;height:0;
filter:alpha(opacity=0); display:none;" id=menu3>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;">
<tr><td height=20>::网页基础::</td></tr>
<tr><td height=20>::网页进阶::</td></tr>
<tr><td height=20>::网页高手::</td></tr>
<tr><td height=20>::网页脚本::</td></tr>
<tr><td height=20>::网页理念::</td></tr>
<tr><td height=20>::网页源件::</td></tr>
</table></div></td></tr></table>
<table cellpadding=0 cellspacing=0 width=150
style="border-top:1pt solid black; border-bottom:1pt solid black;">
<tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'"
id=menutitle4 onclick="menuchange(menu4,140,menutitle4,arrow4);">
<span><span id=arrow4><font face="webdings">4</span>
::兄弟站点::</span></td></tr><tr><td>
<div class=sec_menu style="width:150;height:0;
filter:alpha(opacity=0); display:none;" id=menu4>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;">
<tr><td height=20>征集中...</td></tr>
<tr><td height=20>征集中...</td></tr>
<tr><td height=20>征集中...</td></tr>
<tr><td height=20>征集中...</td></tr>
<tr><td height=20>征集中...</td></tr>
<tr><td height=20>征集中...</td></tr>
</table></div></td></tr></table></div>
</body>
</html>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>tree menu by jiarry</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript">
<!--//made by jiarry.126.com aug.27 2004
function showhide_obj(obj,icon)
{
//objstr=obj.tostring();
//alert(objstr)
/*objstr=2;
a=objstr.tostring()+5;
b=objstr+5
alert(a);alert(b);
*/
if (obj.style.display=="none")
{
div_list = document.all.tags("div"); //指定文档中的对象为div,以适用于ie;
for (i=0; i< div_list.length; i ++) {
thisdiv = div_list[i];
if(thisdiv.id.indexof("title")!=-1)//当文档div中的id含有list时,与charat类似;
{
//if(obj.id!=obj)//该div 的id又非选中的obj,设置该div的style为none
//{
thisdiv.style.display="none";
// }
}
}
myfont=document.all.tags("font");
for(i=0;i<myfont.length;i++)
{
thisfont = myfont[i];
if(thisfont.id.indexof("icon")!=-1 && icon.id!=icon)
{
//alert(thisfont.id)
thisfont.innerhtml="+";
}
}
icon.innerhtml="-";
obj.style.display="";
}
else
{
icon.innerhtml="+";
obj.style.display="none";
}
}
function set_initialization(obj,img)
{//设置初始状态,打开一个层;
obj.style.display="";
img.src="images/icon/minus.gif";
}
//
function show_this(obj)
{
if (obj.id==obj.id)
{
//alert(obj.id)
blinkicon=document.all.tags("font");
for(x=0;x<blinkicon.length;x++)
{
if( blinkicon[x].id.indexof("select")!=-1 && obj.id!=obj )
{
//alert( blinkicon[x].id)
blinkicon[x].innerhtml=" ";
}
}
obj.innerhtml=">";
}
else
{
obj.innerhtml=" ";
}
}
//-->
</script>
<style type="text/css">
span{ width:100px;height:25px;margin-left:15px;}
font{font-weight:bold;}
body,td{font-family:verdana, arial, helvetica, sans-serif; font-size:12px;color:#333333;}
div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#d3f7fe ;width:120px;}
pre{background-color:#fffff1; border:1px solid gray;color:blue;font-family:verdana;arial;padding:20px;}
</style>
</head>
<body>
<p> </p>
<p> </p>
<div style="line-height:25px;" onclick="showhide_obj(title1,icon1)"><font id='icon1'>+</font>栏目一</div>
<div id=title1 style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu1_1 onmouseover="this.style.backgroundcolor='blue'" onmouseout="this.style.backgroundcolor=''" onclick="show_this(select1_1)"><font id='select1_1'></font>菜单一</span></font>
<span id=menu1_2 onclick="show_this(select1_2)"><font id='select1_2'></font>菜单二</span></font>
<span id=menu1_3 onclick="show_this(select1_3)"><font id='select1_3'></font>菜单三</span></font>
</div>
<div style="line-height:25px;" onclick="showhide_obj(title2,icon2)"><font id='icon2'>+</font>栏目二</div>
<div id=title2 style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu2_1 onclick="show_this(select2_1)"><font id='select2_1'></font>菜单一</span></font>
<span id=menu2_2 onclick="show_this(select2_2)"><font id='select2_2'></font>菜单二</span></font>
<span id=menu2_3 onclick="show_this(select2_3)"><font id='select2_3'></font>菜单三</span></font>
</div>
<div style="line-height:25px;" onclick="showhide_obj(title3,icon3)"><font id='icon3'>+</font>栏目三</div>
<div id=title3 style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu3_1 onclick="show_this(select3_1)"><font id='select3_1'></font>菜单一</span></font>
<span id=menu3_2 onclick="show_this(select3_2)"><font id='select3_2'></font>菜单二</span></font>
<span id=menu3_3 onclick="show_this(select3_3)"><font id='select3_3'></font>菜单三</span></font>
</div>
<div style="line-height:25px;" onclick="showhide_obj(title4,icon4)"><font id='icon4'>+</font>栏目四</div>
<div id=title4 style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu4_1 onclick="show_this(select4_1)"><font id='select4_1'></font>菜单一</span></font>
<span id=menu4_2 onclick="show_this(select4_2)"><font id='select4_2'></font>菜单二</span></font>
<span id=menu4_3 onclick="show_this(select4_3)"><font id='select4_3'></font>菜单三</span></font>
<span id=menu4_4 onclick="show_this(select4_4)"><font id='select4_4'></font>菜单三</span></font>
<span id=menu4_5 onclick="show_this(select4_5)"><font id='select4_5'></font>菜单三</span></font>
<span id=menu4_6 onclick="show_this(select4_6)"><font id='select4_6'></font>菜单三</span></font>
</div>
<div>
<span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span>
</div>