javascript仿qq界面的折叠菜单实现代码
2023-06-13 09:14:42 时间
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧.
以下是html结构:
<divid="a"><divid="h1">sdfds</div><divid="b1">dsfdsfsdfsd</div><divid="h2">dsf</div><divid="b2">dsfdsfsdf</div>.......................</div>
id为a里的便是你要添加的菜单的标题和内容.
下面是javascript代码:
复制代码代码如下:
以下是html结构:
<divid="a"><divid="h1">sdfds</div><divid="b1">dsfdsfsdfsd</div><divid="h2">dsf</div><divid="b2">dsfdsfsdf</div>.......................</div>
id为a里的便是你要添加的菜单的标题和内容.
下面是javascript代码:
sx.activex.packmenu={
create:function(t){
vara=document.createElement("div");
var_t=t;
a.style.height="300px";
a.style.width="150px";
a.style.border="1pxredsolid";
a.style.overflow="hidden";
for(vari=0;i<t.length;i++){
varh=document.createElement("div");
varb=document.createElement("div");;
h.style.backgroundColor="blue";
h.style.height="10%";
b.style.padding="5px";
b.style.textAlign="center";
b.style.border="1pxgreensolid";
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){
returnfunction(){
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(varii=0;ii<a.all.length;ii++){
if(parseInt(a.all[ii].style.height)>10)
returna.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){
returnfunction(){
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(varii=0;ii<a.all.length;ii++){
if(parseInt(a.all[ii].style.height)>10)
returna.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)+"%";
}
returna;
}
}
入口参数t是你要传递的二维数组,以一个标题加内容为一个数组项的形式:
下面是调用代码:
<html>
<head>
<title>UntitledDocument</title>
</head>
<body>
<scriptsrc="kongjian.js"></script>
<script>
vara=sx.activex.packmenu.create([["asd","sadsadas"],["sd","sadsaas"],["w","waedqwdq"],["e","efwefw"]]);
//a.contentEditable=true;
document.body.appendChild(a);
</script>
</body>
</html>
搞定,有兴趣的朋友可以看下效果.
相关文章
- c语言qq加密具体思路,悄悄告诉你:C语言如何实现QQ密码大盗
- array.sort排序_javascript数组排序
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javascript中变量提升的问题详解编程语言
- JavaScript 面向对象与原型详解编程语言
- Linux下完美安装QQ的简易教程(linux安装qq教程)
- 使用QQ音乐无障碍, Linux版带来便携音乐享受(qq音乐linux版)
- 使用Linux,畅享QQ聊天的便捷体验(linux使用qq)
- 如何在Linux环境下安装QQ,简单易行的方法?(linux如何安装qq)
- 开启Linux下QQ机器人新时代!(linux qq机器人)
- 在Linux上玩转QQ(linux如何qq)
- 在Linux系统下享受QQ带来的乐趣(linux下的qq)
- javascript小技巧超强推荐第1/5页
- 国外JavaScript经典封装集合整理
- Javascript更新JavaScript数组的uniq方法
- javascript解析后的xml对象的读取方法细解
- javascript面向对象继承
- JavaScript文本框下拉提示(自动提示)
- 9行javascript代码获取QQ群成员具体实现
- 浅析JavaScript中的类型和对象
- javascript闭包传参和事件的循环绑定示例探讨
- JavaScript中的索引数组、关联数组和静态数组、动态数组讲解