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 相关文章推荐
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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作的文本留言本的例子(五)
2006/10/09 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
php微信开发之关注事件
2018/06/14 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
详解javascript函数的参数
2015/11/10 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python实现简易版计算器
2020/06/22 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python爬取代理ip的示例
2020/12/18 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
社区综治宣传月活动总结
2014/07/02 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
使用JS实现简易计算器
2021/06/14 Javascript