第二章 JavaScript显示菜单 第四节 推拉门式菜单
来源：互联网 发布：sql 注入 ordey by 编辑：程序博客网 时间：2024/04/28 18:38
.l{border-left:#000000 solid 1px;}.r{border-right:#000000 solid 1px;}.t{border-top:#000000 solid 1px;}.b{border-bottom:#000000 solid 1px;}第二章 JavaScript显示菜单
效 果 演 示：
二维菜单
三维树形菜单
推拉门式菜单
树形目录菜单
下拉推动式菜单
隐藏下拉式菜单
隐藏右显示菜单
下拉推动式菜单
隐藏下拉式菜单
隐藏右显示菜单
点击 --> 二维菜单，会出现你所要的样式。
JavaScript代码：
<!--
var m=4;
var can=new Array();
var newdivleft=new Array()
var olddivleft=new Array()
var margeleft=parseInt(document.all.div0.style.left);
for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
}
function canout(x){
if (can[x]==1) can[x]=0;else can[x]=1;
}
function moveout(x){
k=x;
if (can[x]==1) {
newdivleft[x]+=6;
if (newdivleft[x]<(margeleft+6)) { 。
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t1=setTimeout("moveout(k)",10);
}else{
thisdiv.left=olddivleft[0];
clearTimeout(t1);}
}else{
if (can[x]==0){
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)
}else{clearTimeout(t2);}
}
}}
-->
var m=4;
var can=new Array();
var newdivleft=new Array()
var olddivleft=new Array()
var margeleft=parseInt(document.all.div0.style.left);
for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
}
function canout(x){
if (can[x]==1) can[x]=0;else can[x]=1;
}
function moveout(x){
k=x;
if (can[x]==1) {
newdivleft[x]+=6;
if (newdivleft[x]<(margeleft+6)) { 。
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t1=setTimeout("moveout(k)",10);
}else{
thisdiv.left=olddivleft[0];
clearTimeout(t1);}
}else{
if (can[x]==0){
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)
}else{clearTimeout(t2);}
}
}}
-->
在<body>与</body>之间：
<div id="div0" style="position:absolute; left:12px; top:151px; width:116px; height:104px; z-index:1" >
<table width="100%" border="0" height="100%" cellpadding="0">
<tr>
<td bgcolor="#FFFFCC" height="17">
<div align="left">
<a href="#" onclick="canout(1) ;moveout(1)">二维菜单</a></div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left">
<a href="unit 2-3.html" onclick="canout(2) ;moveout(2)">三维树形菜单</a>
</div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left">
<a href="unit 2-4.html" onclick="canout(2) ;moveout(2)">推动门式菜单</a>
</div></td></tr>
</table>
</div>
<div id="div1" style="position:absolute; left:-114px; top:171px; width:114px; height:107px; z-index:2; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000">
<div align="center"><a href="#">子菜单1</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单4</a><br>
<a href="#">子菜单5</a><br>
</div>
</div>
<table width="100%" border="0" height="100%" cellpadding="0">
<tr>
<td bgcolor="#FFFFCC" height="17">
<div align="left">
<a href="#" onclick="canout(1) ;moveout(1)">二维菜单</a></div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left">
<a href="unit 2-3.html" onclick="canout(2) ;moveout(2)">三维树形菜单</a>
</div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left">
<a href="unit 2-4.html" onclick="canout(2) ;moveout(2)">推动门式菜单</a>
</div></td></tr>
</table>
</div>
<div id="div1" style="position:absolute; left:-114px; top:171px; width:114px; height:107px; z-index:2; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000">
<div align="center"><a href="#">子菜单1</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单4</a><br>
<a href="#">子菜单5</a><br>
</div>
</div>
JavaScript代码讲解：
var m=4; 声明一个存放子菜单图层数的变量，当子菜单图层数不是4时，要改变这个变量的值 var can=new Array(); 声明一个数组，存放是否拉出子菜单的控制代码 var newdivleft=new Array()
var olddivleft=new Array() 声明一个数组，存放各图层新的“left”参数值
声明一个数组，存放初始的各图层“left”参数值 var margeleft=parseInt(document.all.div0.style.left); 声明存放拉出子菜单的左边距变量 for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
} 获取上面声明的数组的初始值 function canout(x){
if (can[x]==1) can[x]=0;else can[x]=1;
} 设置子菜单是拉出还是推入的控制代码，为1时拉出，为0时推入。 for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
} 获取上面声明的数组的初始值 function moveout(x){
k=x;
if (can[x]==1) {
开始拉出子菜单 newdivleft[x]+=6; 设置每次拉出6个像素 if (newdivleft[x]<(margeleft+6)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t1=setTimeout("moveout(k)",10); }
如果没有拉到位，可继续拉
拉一次子菜单
每10毫秒拉动一次子菜单 else{
thisdiv.left=olddivleft[0];
clearTimeout(t1);
} 如果子菜单已拉到位，则清除定时函数，停止拉动子菜单 }else{
if (can[x]==0){
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)
}else{clearTimeout(t2);}}}}
开始推入子菜单，方法与拉出子菜单时相同，只是方向相反
var olddivleft=new Array() 声明一个数组，存放各图层新的“left”参数值
声明一个数组，存放初始的各图层“left”参数值 var margeleft=parseInt(document.all.div0.style.left); 声明存放拉出子菜单的左边距变量 for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
} 获取上面声明的数组的初始值 function canout(x){
if (can[x]==1) can[x]=0;else can[x]=1;
} 设置子菜单是拉出还是推入的控制代码，为1时拉出，为0时推入。 for (i=0;i<=m;i++){
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;
} 获取上面声明的数组的初始值 function moveout(x){
k=x;
if (can[x]==1) {
开始拉出子菜单 newdivleft[x]+=6; 设置每次拉出6个像素 if (newdivleft[x]<(margeleft+6)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t1=setTimeout("moveout(k)",10); }
如果没有拉到位，可继续拉
拉一次子菜单
每10毫秒拉动一次子菜单 else{
thisdiv.left=olddivleft[0];
clearTimeout(t1);
} 如果子菜单已拉到位，则清除定时函数，停止拉动子菜单 }else{
if (can[x]==0){
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)
}else{clearTimeout(t2);}}}}
开始推入子菜单，方法与拉出子菜单时相同，只是方向相反
返回 上一页 下一页
- 第二章 JavaScript显示菜单 第四节 推拉门式菜单
- 推拉门式的菜单
- 第二章 JavaScript显示菜单效果--导航条式菜单
- 第二章 JavaScript显示菜单效果--推动式菜单
- 第二章 JavaScript显示菜单效果--二维树形目录菜单
- 源码解析：3D推拉门式滑动菜单
- 第二章 菜单效果--CSS下拉式菜单
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- Android 3D滑动菜单完全解析，实现推拉门式的立体特效
- 第二章 菜单效果--省城市菜单
- 第四节：菜单的使用
- JavaScript 多级联动浮动菜单 (第二版)
- Pro ASP.NET 3.5 Server Controls and AJAX Components
- Beginning PHP and MySQL E-Commerce: From Novice to Professional
- AsteriskNOW
- Pro Windows PowerShell
- Apache Cookbook: Solutions and Examples for Apache Administrators [ILLUSTRATED]
- 第二章 JavaScript显示菜单 第四节 推拉门式菜单
- Catalyst
- Zend Studio for Eclipse Developer's Guide
- Java Pocket Guide
- Programming Microsoft Dynamics NAV
- 林觉民《与妻书》：最刻骨铭心的爱
- Ferret
- Windows Server 2008: The Complete Reference
- 《视频网站开发实战》目录
