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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 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
PHP 上传文件大小限制
2009/07/05 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python 如何引入协程和原理分析
2020/11/30 Python
实习老师个人总结的自我评价
2013/09/28 职场文书
民生工作实施方案
2014/05/31 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
平面设计师岗位职责
2014/09/18 职场文书
党支部鉴定意见
2015/06/02 职场文书
一年级语文教学随笔
2015/08/14 职场文书
公司晚会主持词
2019/04/17 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
vue+echarts实现多条折线图
2022/03/21 Vue.js