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库的tab新形式使用
Nov 16 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
layui table 参数设置方法
Aug 14 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 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
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
详解Python自建logging模块
2018/01/29 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python实现井字棋小游戏
2020/03/04 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
迎接领导欢迎词
2014/01/11 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
mysql主从复制的实现步骤
2021/10/24 MySQL
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA