<!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>