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控制div及网页相关属性的代码
Dec 19 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
js判断两个数组相等的5种方法
May 06 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留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
js function使用心得
2010/05/10 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue小白入门教程
2018/04/02 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python实现简易数码时钟
2021/02/19 Python
pandas.cut具体使用总结
2019/06/24 Python
python程序变成软件的实操方法
2019/06/24 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python语言异常处理测试过程解析
2020/01/08 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang