脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 网页特效 → 导航菜单 →

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

 更新时间：2007年09月28日 20:07:27   作者：  
兼容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>

两个都关闭的状态

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

一个打开一个关闭的状态

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

美化下的

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:

相关文章

最新评论