首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
鼠标触发移动的分层菜单 层菜单moveMenu
所属分类：
网络编程
/
JavaScript
阅读数： 1341
收藏 0
赞 0
分享
会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>移动菜单，层菜单moveMenu</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>.alpha { FILTER: Alpha(Opacity=80) } .td1 { FONT-SIZE: 12px } .td2 { BACKGROUND-COLOR: #ccffff; CURSOR: hand; FONT-SIZE: 12px } .maskl { OVERFLOW: hidden } .cardtitle { BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-SIZE: 12px; TEXT-INDENT: 4pt } .cardbottom { BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90) } </STYLE> <SCRIPT language=Jscript> //建议使用IE5.0以上应用本代码. //**************************************************** //用数组来存储多个timeOut标识. tBack=new Array(5); tOut=new Array(5); //激活当前选项卡. function menuOut(whichMenu){ var curMenu=eval("menu"+whichMenu); curMenu.runtimeStyle.zIndex=6; clearTimeout(tBack[whichMenu]); moveOut(whichMenu); } //恢复初始状态. function menuBack(whichMenu){ var curMenu=eval("menu"+whichMenu); curMenu.runtimeStyle.zIndex=curMenu.style.zIndex; clearTimeout(tOut[whichMenu]); moveBack(whichMenu); } //移动当前选项卡 function moveOut(curNum){ var curMenu=eval("menu"+curNum); if(curMenu.style.posLeft>0) { curMenu.style.posLeft-=2; tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1); } } //移回选项卡. function moveBack(curNum){ var curMenu=eval("menu"+curNum); if(curMenu.style.posLeft<30) { curMenu.style.posLeft+=2; tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1); } } //鼠标移过时改变表格单元式样。 function swapClass(){ var o=event.srcElement; if(o.className=="td1") o.className="td2" else if(o.className=="td2") o.className="td1"; } document.onmouseover=swapClass; document.onmouseout=swapClass; </SCRIPT> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> <BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" marginwidth="0"> <DIV class=maskl id=menuPos style="HEIGHT: 216px; LEFT: 115px; POSITION: absolute; TOP: 59px; WIDTH: 132px; Z-INDEX: 1"> <DIV id=menu1 onmouseout=menuBack(1) onmouseover=menuOut(1) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1"> <DIV class=cardbottom id=Layer1 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>选项一</TD></TR> <TR> <TD class=td1>选项二</TD></TR> <TR> <TD class=td1>选项三</TD></TR> <TR> <TD class=td1>选项四</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>选项卡一</TD></TR></TBODY></TABLE></DIV> <DIV id=menu2 onmouseout=menuBack(2) onmouseover=menuOut(2) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1"> <DIV class=cardbottom id=Layer2 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>选项一</TD></TR> <TR> <TD class=td1>选项二</TD></TR> <TR> <TD class=td1>选项三</TD></TR> <TR> <TD class=td1>选项四</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>选项卡二</TD></TR></TBODY></TABLE></DIV> <DIV id=menu3 onmouseout=menuBack(3) onmouseover=menuOut(3) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1"> <DIV class=cardbottom id=Layer3 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>选项一</TD></TR> <TR> <TD class=td1>选项二</TD></TR> <TR> <TD class=td1>选项三</TD></TR> <TR> <TD class=td1>选项四</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>选项卡三</TD></TR></TBODY></TABLE></DIV> <DIV id=menu4 onmouseout=menuBack(4) onmouseover=menuOut(4) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1"> <DIV class=cardbottom id=Layer4 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>选项一</TD></TR> <TR> <TD class=td1>选项二</TD></TR> <TR> <TD class=td1>选项三</TD></TR> <TR> <TD class=td1>选项四</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>选项卡四</TD></TR></TBODY></TABLE></DIV> <DIV id=menu5 onmouseout=menuBack(5) onmouseover=menuOut(5) style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1"> <DIV class=cardbottom id=Layer5 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>选项一</TD></TR> <TR> <TD class=td1>选项二</TD></TR> <TR> <TD class=td1>选项三</TD></TR> <TR> <TD class=td1>选项四</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>选项卡五</TD></TR></TBODY></TABLE></DIV></DIV> </BODY></HTML>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
react PropTypes校验传递的值操作示例
这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
在Webpack中用url-loader处理图片和字体的问题
这篇文章主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
React中Ref 的使用方法详解
这篇文章主要介绍了React中Ref 的使用方法,结合实例形式总结分析了react中ref基本功能、用法及操作注意事项,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
JS数组降维的实现Array.prototype.concat.apply([], arr)
这篇文章主要介绍了JS数组降维的实现Array.prototype.concat.apply([], arr)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
js最全的数组的降维5种办法(小结)
这篇文章主要介绍了js最全的数组的降维5种办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
React生命周期原理与用法踩坑笔记
这篇文章主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
Vue 3.0 全家桶抢先体验
这篇文章主要介绍了Vue 3.0 全家桶抢先体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
JavaScript 链表定义与使用方法示例
这篇文章主要介绍了JavaScript 链表定义与使用方法,结合实例形式分析了JavaScript 链表的基本功能、定义与使用方法,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
JavaScript Date对象功能与用法学习记录
这篇文章主要介绍了JavaScript Date对象功能与用法,结合实例形式总结分析了JavaScript Date对象基本功能、用法及操作注意事项,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
Node.js设置定时任务之node-schedule模块的使用详解
node-schedule是 Node.js 的一个定时任务（crontab）模块。这篇文章主要介绍了Node.js设置定时任务之node-schedule模块的使用,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
又被电商耍?2015.6·18年中大促"先涨后降"把戏仍在
儿子网购Q币被骗 父亲怒找客服投诉又被骗
网上怎么赚钱 网络赚钱需要注意哪些东西
adsense西联邮局收款两张版本单子填写示例
六一儿童节微营销秘籍 互动吸粉6大招
手机赚钱软件哪个比较好 手机赚钱软件排行榜及使用方法 手机赚钱最快的软件汇总
站长故事
更多
奇幻咔咔3D小熊孟得明 揭秘瞬间火爆网络的背后故事
分享我经营网站的方法心得,希望大家能学到知识
创业失败：一个屌丝站长4年互联网的辛酸经历
如何利用百度贴吧做网络营销
如何让自己的网站流量暴增并增加成交率
我对互联网VC的10点看法 知己知彼百战不殆
