注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

John's Blog

天空,有梦就可以飞翔!

 
 
 

日志

 
 
关于我

刚走出校园的毕业生,就读计算机网络专业,对网站建设有一定的基础。开始探求Drupal已有一段时间,对Drupal的发展很是看好。现就职于深圳慧衡科技有限公司(intematrix.cn),它是一家专门服务于中国及海外中小企业的网络营销分析和优化服务提供商。 QQ交流群:44581272

网易考拉推荐

JS仿QQ的展开/折叠菜单  

2009-05-29 11:58:02|  分类: 网页特效 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

仿QQ菜单风格一样的下拉菜单,点击后展开或折叠,可以无限扩展菜单单元,JS会自动添加对象,并加以控制,代码也不算复杂,修改方便,而且很容易看懂,或许你以后能用得上吧!

代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿QQ展开菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
table{width:100px;overflow:hidden;}
#control,#control table,#control table td{font-size:12px;}
#control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;}
#control table{width:100px;height:20px;overflow:hidden;}
#control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;}
#control table .tabTit{background:#E0E8B8;}
#control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;}
#control .testLink{font-weight:bold;font-size:12px;}
.test{width:100px;background-color:#f6f6f6;overflow:hidden;}
.test li{list-style:none;color:#000;font-size:13px;line-height:20px;}
#control table,.test table{margin:0 auto;text-align:center;}
.style1{font-size:8px;color:#fff;}
</style>
<script language="javascript">
function $G(Read_Id) { return document.getElementById(Read_Id) }
var openedObjId=null
function Effect(ObjectId){
 if (openedObjId){
  $G(openedObjId+"tab").innerHTML = "<a href=# >+</a>";
  Start(openedObjId,\'Close\');
 }
 if(openedObjId!=ObjectId){
  $G(ObjectId+"tab").innerHTML = "<a href=#>-</a>";
  Start(ObjectId,\'Opens\');
  openedObjId=ObjectId
 }
 else openedObjId=null
}
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>
</head>
<body>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
<td width="100%" align="center" class="tabTit" onClick="Effect(\'test\');"><li id="testtab" style="float:right"><a href="http://www.codefans.net">+</a></li><li style="float:left"><a href="#" class="testLink">源码爱好者</a></li></td>
    </tr>
  </table>
</div>
<div id="test" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="http://www.codefans.net/sort/list_5_80_1.shtml">游戏娱乐</a></li><li><a href="http://www.codefans.net/sort/list_5_82_1.shtml">媒体网络</a></li><li><a href="http://www.codefans.net/sort/list_5_99_1.shtml">窗体界面</a></li><li><a href="http://www.codefans.net/sort/list_5_102_1.shtml">算法相关</a></li></ul></td>
    </tr>
  </table>
</div>
<br>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100%" align="center" class="tabTit" onClick="Effect(\'test1\');" ><li id="test1tab" style="float:right"><a href="#">+</a></li><li style="float:left"><a href="#"class="testLink">JAVA源代码</a></li></td>
    </tr>
  </table>
</div>
<div id="test1" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="http://www.codefans.net/sort/list_5_93_1.shtml">系统相关</a></li><li><a href="http://www.codefans.net/sort/list_5_90_1.shtml">综合应用</a></li><li><a href="http://www.codefans.net/sort/list_5_89_1.shtml">文件操作</a></li></ul></td>
    </tr>
  </table>
</div>
<br>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100%" align="center" class="tabTit" onClick="Effect(\'test2\');"><li id="test2tab" style="float:right"><a href="#">+</a></li><li style="float:left"><a href="#" class="testLink">JAVA源代码</a></li></td>
    </tr>
  </table>
</div>
<div id="test2" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="http://www.codefans.net/sort/list_5_88_1.shtml">书籍源码</a></li><li><a href="http://www.codefans.net/sort/list_5_101_1.shtml">初学实例</a></li><li><a href="http://www.codefans.net/sort/list_5_220_1.shtml">类库组件</a></li></ul></td>
    </tr>
  </table>
</div>
</body>
</html>

  评论这张
 
阅读(505)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016