带缓冲的收缩与展开内容效果

时间:2020-05-12 人气:0

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

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

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

复制代码代码如下:

<html>
<head>
<script>
/*
By Auntion
QQ 82874972
欢迎喜欢javascript 和 ajax的朋友++我QQ,大家共同进步,呵呵
使用方法
调用效果: 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+"');>关闭</a>"
    }else{
    Start(ObjectId,'Close');
    $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>"
    }
}
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>
</head>
<body>
<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">这<br>
        里<br>
        是<br>
        第<br>
        二<br>
        ,<br>
        很<br>
        正<br>
        常<br></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>
<br>
<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">这<br>
        里<br>
        是<br>
        第<br>
        一<br>
        ,<br>
        很<br>
        正<br>
        常<br></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>
</body>
</html>

两个都关闭的状态

<html> 
<head> 
<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+"');>关闭</a>" 
    }else{  
    Start(ObjectId,'Close'); 
    $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>" 
    } 
} 
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> 
</head> 
<body> 
<div> 
  <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> 
  <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> 
  <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需刷新才能执行]

一个打开一个关闭的状态

<html> 
<head> 
<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+"');>关闭</a>" 
    }else{  
    Start(ObjectId,'Close'); 
    $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>" 
    } 
} 
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> 
</head> 
<body> 
<div> 
  <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> 
  <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> 
  <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需刷新才能执行]

美化下的

<html> 
<head> 
<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+"');>闭月羞花</a>" 
    }else{  
    Start(ObjectId,'Close'); 
    $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>芝麻开门</a>" 
    } 
} 
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> 
</head> 
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);  
"><center> 
<div> 
  <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> 
  <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> 
  <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需刷新才能执行]

加载全部内容

带缓冲的 收缩与展开内容效果

带缓冲的收缩与展开内容效果