带缓冲的 收缩与展开内容效果_导航菜单

兼容ie5.5+   firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试)

看到blueidea很多朋友都发了一些 收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.
最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.
这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.

放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!

复制代码 代码如下:

<script> <BR>/* <BR>By Auntion <BR>QQ 82874972 <BR>欢迎喜欢javascript 和 ajax的朋友++我QQ,大家共同进步,呵呵 <BR>使用方法 <BR>调用效果: Effect(1,2); <BR> 其中1为: 被改变对象的id <BR> 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) <BR>注意给对象ID的时候一定不要重复. <BR>*/ <BR>function $G(Read_Id) { return document.getElementById(Read_Id) } <BR>function Effect(ObjectId,parentId){ <BR> if ($G(ObjectId).style.display == 'none'){ <BR> Start(ObjectId,'Opens'); <BR> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" <BR> }else{ <BR> Start(ObjectId,'Close'); <BR> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" <BR> } <BR>} <BR>function Start(ObjId,method){ <BR>var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 <BR>var MinHeight = 5; //定义对象最小高度 <BR>var MaxHeight = 130; //定义对象最大高度 <BR>var BoxAddMax = 1; //递增量初始值 <BR>var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] <BR>var Reduce = (BoxAddMax - Every_Add); <BR>var Add = (BoxAddMax + Every_Add); <BR>if (method == "Close"){ <BR>var Alter_Close = function(){ //构建一个虚拟的[递减]循环 <BR> BoxAddMax /= Reduce; <BR> BoxHeight -= BoxAddMax; <BR> if (BoxHeight <= MinHeight){ <BR> $G(ObjId).style.display = "none"; <BR> window.clearInterval(BoxAction); <BR> } <BR> else $G(ObjId).style.height = BoxHeight; <BR>} <BR>var BoxAction = window.setInterval(Alter_Close,1); <BR>} <BR>else if (method == "Opens"){ <BR>var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 <BR> BoxAddMax *= Add; <BR> BoxHeight += BoxAddMax; <BR> if (BoxHeight >= MaxHeight){ <BR> $G(ObjId).style.height = MaxHeight; <BR> window.clearInterval(BoxAction); <BR> }else{ <BR> $G(ObjId).style.display= "block"; <BR> $G(ObjId).style.height = BoxHeight; <BR> } <BR>} <BR>var BoxAction = window.setInterval(Alter_Opens,1); <BR>} <BR>} <BR></script>

  
    
      
    
  

关闭

  
    
      
    
  

这

        里

        是

        第

        二

        ,

        很

        正

        常

  
    
      
    
  

▲

  
    
      
    
  

关闭

  
    
      
    
  

这

        里

        是

        第

        一

        ,

        很

        正

        常

  
    
      
    
  

▲

两个都关闭的状态

<script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ if ($G(ObjectId).style.display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } else if (method == "Opens"){ var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script> <style> body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } </style> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onclick="Effect('test',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这 里 是 第 二 , 很 正 常 </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onclick="Effect('test1',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test1" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这 里 是 第 一 , 很 正 常 </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个打开一个关闭的状态

<script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ var Obj_Display = $G(ObjectId).style.display; if (Obj_Display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); //关闭动作************************************** if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } //打开动作************************************** else if (method == "Opens"){ var Alter_Opens = function(){ BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script> <style> body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } </style> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onclick="Effect('test',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test" class="test" style="display:block;"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这 里 是 第 二 , 很 正 常 </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onclick="Effect('test1',this.parentNode.id);">打开</a></td> </tr> </table> </div> <div id="test1" class="test" style="display:none;"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这 里 是 第 一 , 很 正 常 </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

美化下的

<script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ if ($G(ObjectId).style.display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>闭月羞花" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>芝麻开门" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } else if (method == "Opens"){ var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script> <style> body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } </style> <center> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onclick="Effect('test',this.parentNode.id);" onfocus="this.blur()">闭月羞花</a></td> </tr> </table> </div> <div id="test" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); "> <tr> <td colspan="3" align="center" valign="top"> <font size="4" face="微软简行楷"><font color="#FF00FF">变</font><font color="#C000FF">焦</font><font color="#8000FF">基 </font><font color="#4000FF">本</font><font color="#0000FF">靠</font><font color="#0030FF">走</font><font color="#0060FF">， </font><font color="#0090FF">对</font><font color="#00C0FF">焦</font><font color="#00C0C0">基</font><font color="#00C080">本 </font><font color="#00C040">靠</font><font color="#00C000">扭</font><font color="#3FC000">，</font><font color="#7FC000">遮 </font><font color="#BFC000">光</font><font color="#FFC000">基</font><font color="#FF9000">本</font><font color="#FF6000">靠 </font><font color="#FF3000">手</font><font color="#FF0000">，</font><font color="#FF0000">虚</font><font color="#FF3000">化 </font><font color="#FF6000">基</font><font color="#FF9000">本</font><font color="#FFC000">靠</font><font color="#C0C000">抖 </font><font color="#80C000">，</font><font color="#40C000">测</font><font color="#00C000">光</font><font color="#00C03F">基 </font><font color="#00C07F">本</font><font color="#00C0BF">靠</font><font color="#00C0FF">瞅</font><font color="#0090FF">， </font><font color="#0060FF">防</font><font color="#0030FF">抖</font><font color="#0000FF">基</font><font color="#3F00FF">本 </font><font color="#7F00FF">靠</font><font color="#BF00FF">肘</font><font color="#FF00FF">。</font></font> </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onclick="Effect ('test1',this.parentNode.id);" onfocus="this.blur()">闭月羞花</a></td> </tr> </table> </div> <div id="test1" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); "> <tr> <td colspan="3" align="center" valign="top"> <font size="4" face="微软简行楷"><font color="#FF00FF">春</font><font color="#A400FF">天</font><font color="#4900FF">,</font><font color="#000DFF">我</font><font color="#0052FF">把</font><font color="#0096FF">老</font><font color="#00C0DB">婆</font><font color="#00C080">埋</font><font color="#00C025">在</font><font color="#36C000">地</font><font color="#91C000">底</font><font color="#ECC000">下</font><font color="#FF8A00">,</font><font color="#FF4500">秋</font><font color="#FF0000">天</font><font color="#FF4400">,</font><font color="#FF8900">我</font><font color="#EDC000">就</font><font color="#92C000">有</font><font color="#37C000">好</font><font color="#00C024">多</font><font color="#00C07F">老</font><font color="#00C0DA">婆</font><font color="#0097FF">.</font><font color="#0053FF">.</font><font color="#000EFF">.</font><font color="#4800FF">.</font><font color="#A300FF">.</font><font color="#FF00FF">.</font></font> </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> </center>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]