鼠标触发移动的分层菜单层菜单moveMenu

2023-05-15 原文

会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。

<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">
<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>&nbsp;</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="https://resources.devmax.cn/uploads/20230515/c19737e310be67fdfa650cc79ce8a890.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>&nbsp;</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="https://resources.devmax.cn/uploads/20230515/c19737e310be67fdfa650cc79ce8a890.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>&nbsp;</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="https://resources.devmax.cn/uploads/20230515/c19737e310be67fdfa650cc79ce8a890.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>&nbsp;</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="https://resources.devmax.cn/uploads/20230515/c19737e310be67fdfa650cc79ce8a890.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>&nbsp;</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="https://resources.devmax.cn/uploads/20230515/c19737e310be67fdfa650cc79ce8a890.gif" width="14"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡五</td>
</tr></tbody></table>
</div>
</div>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

鼠标触发移动的分层菜单层菜单moveMenu的更多相关文章

Android自定义View实现跟随手指移动

这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现可移动模态框

这篇文章主要为大家详细介绍了JS实现可移动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现悬浮框自由移动+录音功能的示例代码

这篇文章主要为大家详细介绍了如何利用Vue实现悬浮框自由移动+录音功能，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
如何在python中用os模块实现批量移动文件

在工作中难免会遇到需要批量整理文件的情况,当需要从一堆文件中将部分文件批量地转移时,如果手工一一转移难免浪费时间,这篇文章主要给大家介绍了关于如何在python中用os模块实现批量移动文件的相关资料,需要的朋友可以参考下
Android自定义View实现跟随手指移动的小兔子

这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动的小兔子，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用threejs实现第一人称视角的移动的问题(示例代码)

第一人称视角的场景巡检主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题，今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能，感兴趣的朋友一起看看吧
jQuery利用键盘上下键移动表格内容

这篇文章主要为大家详细介绍了jQuery利用键盘上下键移动表格内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现跟随鼠标移动的图片

这篇文章主要为大家详细介绍了javascript实现跟随鼠标移动的图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用JS定时器实现元素移动

这篇文章主要为大家详细介绍了利用JS定时器实现元素移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现左右两个列表框的内容相互移动功能示例

这篇文章主要介绍了jQuery实现左右两个列表框的内容相互移动功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

鼠标触发移动的分层菜单 层菜单moveMenu

随机推荐

鼠标触发移动的分层菜单层菜单moveMenu