javascript仿qq界面的折叠菜单实现代码


Posted in Javascript onDecember 12, 2012

最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧.

以下是html结构:
<div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div><div id="b2">dsfdsfsdf</div>.......................</div>
id为a里的便是你要添加的菜单的标题和内容.

下面是javascript代码:

sx.activex.packmenu={ 
create:function(t){ 
var a=document.createElement("div"); 
var _t=t; 
a.style.height="300px"; 
a.style.width="150px"; 
a.style.border="1px red solid"; 
a.style.overflow="hidden"; 
for(var i=0;i<t.length;i++){ 
var h=document.createElement("div"); 
var b=document.createElement("div");; 
h.style.backgroundColor="blue"; 
h.style.height="10%"; 
b.style.padding="5px"; 
b.style.textAlign="center"; 
b.style.border="1px green solid"; 
h.innerHTML=t[i][0]; 
b.innerHTML=t[i][1]; 
b.style.overflow="hidden"; 
b.style.height="0px"; 
b.style.display="none"; 
h.onclick=function(){ 
if(this.nextSibling.style.display=="none"){ 
this.nextSibling.style.height="1px"; 
this.nextSibling.style.display="block"; 
this.h=window.setInterval(function(t,t1){ 
return function(){ 
if(!t1) return; 
//alert(t.nextSibling.offsetHeight); 
if(parseInt(t.nextSibling.style.height)<100-_t.length*parseInt(a.all[0].style.height)-3){ 
t.nextSibling.style.height=parseInt(t.nextSibling.style.height)+3+"%"; 
t1.style.height=parseInt(t1.style.height)-3+"%"; 
} 
else{ 
t.nextSibling.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%";; 
t1.style.display="none"; 
t1.style.height="0px"; 
window.clearInterval(t.h); 
} 
} 
}(this,(function(){ 
for(var ii=0;ii<a.all.length;ii++){ 
if(parseInt(a.all[ii].style.height)>10) 
return a.all[ii]; 
} 
})()),10); 
} 
else{ 
if(this!=this.parentNode.firstChild){ 
this.previousSibling.style.height="1px"; 
this.previousSibling.style.display="block"; 
} 
else{ 
this.parentNode.lastChild.style.display="block"; 
this.parentNode.lastChild.style.height="1px"; 
} 
this.h=window.setInterval(function(t,t1){ 
return function(){ 
if(!t1) return; 
if(parseInt(t.nextSibling.style.height)>3){ 
if(t!=t.parentNode.firstChild) 
t.previousSibling.style.height=parseInt(t.previousSibling.style.height)+3+"%"; 
else 
t.parentNode.lastChild.style.height=parseInt(t.parentNode.lastChild.style.height)+3+"%"; 
t1.style.height=parseInt(t1.style.height)-3+"%"; 
} 
else{ 
if(t!=t.parentNode.firstChild) 
t.previousSibling.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%"; 
else 
t.parentNode.lastChild.style.height=100-_t.length*parseInt(a.all[0].style.height)+"%"; 
t.nextSibling.style.display="none"; 
t.nextSibling.style.height="0px"; 
window.clearInterval(t.h); 
} 
} 
}(this,(function(){ 
for(var ii=0;ii<a.all.length;ii++){ 
if(parseInt(a.all[ii].style.height)>10) 
return a.all[ii]; 
} 
})()),1); 
} 
} 
a.appendChild(h); 
a.appendChild(b); 
a.all[1].style.display="block"; 
a.all[1].style.height=100-t.length*parseInt(a.all[0].style.height)+"%"; 
} 
return a; 
} 
}

入口参数t是你要传递的二维数组,以一个标题加内容为一个数组项的形式:
下面是调用代码:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js" ></script>
<script>
var a=sx.activex.packmenu.create([["asd","sadsadas"],["sd","sadsaas"],["w","waedqwdq"],["e","efwefw"]]);
//a.contentEditable=true;
document.body.appendChild(a);
</script>
</body>
</html>
搞定,有兴趣的朋友可以看下效果.
Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
用js判断页面是否加载完成实现代码
Dec 11 #Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 #Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 #Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 #Javascript
You might like
通过html表格发电子邮件
2006/10/09 PHP
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS实现小星星特效
2019/12/24 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
python处理大数字的方法
2015/05/27 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python管理Windows服务小脚本
2018/03/12 Python
pandas 选择某几列的方法
2018/07/03 Python
PyQt5实现简易计算器
2020/05/30 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
20岁生日感言
2014/01/13 职场文书
网络信息安全承诺书
2014/03/26 职场文书
业务内勤岗位职责
2014/04/30 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
员工试用期自我评价
2014/09/18 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Django中celery的使用项目实例
2022/07/07 Python