js实现带缓冲效果的仿QQ面板折叠菜单代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现带缓冲效果的仿QQ面板折叠菜单代码。分享给大家供大家参考。具体如下:

带缓冲效果的仿QQ面板折叠菜单代码,使用方法:调用效果: Effect(1,2);
其中1为: 被改变对象的id
其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id)

注意给对象ID的时候一定不要重复。

运行效果如下图所示:

js实现带缓冲效果的仿QQ面板折叠菜单代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>带缓冲效果的仿QQ面板折叠菜单代码</title>
<script>
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>
table{width:192px;overflow:hidden}
#control,#control table,#control table td{ font-size:12px;}
#control{ width:192px; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; }
#control table{ width:192px; 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:192px;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>
</head>
<body>
<div id="control">
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="100%" align="center" class="tabTit" ><li id="testtab" style="float:right"><a href="#" onClick="Effect('test',this.parentNode.id);" >+</a> </li><li style="float:left"><a href="#" onClick="Effect('test');" 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>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</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" ><li id="test1tab" style="float:right"><a href="#" onClick="Effect('test1',this.parentNode.id);" >+</a> </li><li style="float:left"><a href="#" onClick="Effect('test1');" class="testLink">缓冲菜单</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>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</li><li>缓冲菜单</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" ><li id="test2tab" style="float:right"><a href="#" onClick="Effect('test2',this.parentNode.id);" >+</a> </li><li style="float:left"><a href="#" onClick="Effect('test2');" class="testLink">缓冲菜单</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>缓冲菜单</li><li>缓冲菜单</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" ><li id="test3tab" style="float:right"><a href="#" onClick="Effect('test3',this.parentNode.id);" >+</a> </li><li style="float:left"><a href="#" onClick="Effect('test3');" class="testLink">缓冲菜单</a></li></td>
 </tr>
 </table>
</div>
<div id="test3" 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>缓冲菜单</li><li>缓冲菜单</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" ><li id="test4tab" style="float:right"><a href="#" onClick="Effect('test4',this.parentNode.id);" >+</a> </li><li style="float:left"><a href="#" onClick="Effect('test4');" class="testLink">缓冲菜单</a></li></td>
 </tr>
 </table>
</div>
<div id="test4" 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>缓冲菜单</li><li>缓冲菜单</li></ul></td>
 </tr>
 </table>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 #Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 #Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 #Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 #Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
You might like
php escape URL编码
2008/12/10 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP队列用法实例
2014/11/05 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php技巧小结【推荐】
2017/01/19 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript中this指向详解
2016/04/23 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
酒店服务与管理毕业生求职信
2013/11/02 职场文书
工作人员思想汇报
2014/01/09 职场文书
校本教研工作制度
2014/01/22 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
给校长的一封建议书
2014/03/12 职场文书
责任书格式范文
2014/07/28 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年护士节慰问信
2015/03/23 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python