第一段代码 一开始是展开的
- <!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>
复制代码
|
|