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获取QueryString的方法小结
Feb 28 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
javascript的几种写法总结
Sep 30 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
js数组实现权重概率分配
Sep 12 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
计数器详细设计
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
Javascript 对象的解释
2008/11/24 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
AngularJS基础知识
2014/12/21 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
jquery validate demo 基础
2015/10/29 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
JS实现方形抽奖效果
2018/08/27 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
在校生党员自我评价
2013/09/25 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
生日邀请函范文
2014/01/13 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
质量提升方案
2014/06/16 职场文书
中班教师个人总结
2015/02/05 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
高中生物教学反思
2016/02/20 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle