Rumah >hujung hadapan web >tutorial js >带缓冲的收缩与展开内容效果_导航菜单

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

WBOYasal: 2016-05-16 19:08:42997semak imbas

兼容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需刷新才能执行]

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript一段创建层的代码_javascript技巧Artikel seterusnya：JavaScript加密解密7种方法总结分析_黑客性质

Artikel berkaitan

Lihat lagi