vml 实现web topo原型(13) -弹出菜单

最新推荐文章于 2017-04-18 08:46:10 发布

原创最新推荐文章于 2017-04-18 08:46:10 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #javascript #function #border #behavior #div

web编程专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一个使用VML实现的简单菜单显示脚本。该脚本通过JavaScript为设备元素添加了鼠标悬停时显示和隐藏菜单的功能，并展示了如何设置元素的层级及位置属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单击设备出现菜单

这个是从网上找了个简单的脚本。单层的。没有用css.

主要注意z-index 的层次和写法。 Css和js不一样

组合vml 元素的zindex 以group 为准。

<html xmlns:v="urn:schemas-microsoft-com:vml"> <mce:style></mce:style><style mce_bogus="1">#mdiv{ position: absolute; border: 1px solid #92B7E5;z-index: 3; top: 0px; left: 0px; width: 150px; height: 170px; background-color: #FFFFFE; padding: 5px; overflow: hidden;}</style> <STYLE> v/:* { BEHAVIOR: url(#default#VML) } </STYLE> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 设备 </title> </head> <mce:script type="text/javascript" language="javascript" src="./js/createNE.js" mce_src="./js/createNE.js"></mce:script> <mce:script type="text/javascript" language="javascript" src="./js/moveObj.js" mce_src="./js/moveObj.js"></mce:script> <mce:script type="text/javascript" language="javascript" src="./js/ShowMenu.js" mce_src="./js/ShowMenu.js"></mce:script> <mce:script type="text/javascript" language="javascript"></mce:script> <body bgcolor="#ffffff"> <div id="mdiv">设备信息查看</div>  <mce:script type="text/javascript" language="javascript"></mce:script> <button onclick="show()">源码</button> <div style='position: absolute;z-index:8;top: 40px; left: 5px'> 12345<br> 12345 </div> <div style='position: absolute;z-index:1;top: 70px; left: 5px'> abcde<br> abcde </div> </body> </html>