Js+VML实现炫酷实用的右键弹出菜单

作者:纸飞机

时间:2026-10-29

浏览:653

本文介绍如何使用JavaScript与VML技术实现一个外观炫酷且实用的右键弹出菜单。通过禁用默认右键菜单,利用VML绘制图形元素,并绑定鼠标事件,用户可以自定义菜单的样式与交互逻辑,提升网页交互体验。

文章目录

Js+VML右键菜单实现原理与代码结构

<HTML xmlns:v><HEAD> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js+DVML:很酷实用的右键弹出菜单</title> <STYLE> v\:*{behavior:url(#default#VML);} .menulist{position:static;PADDING-TOP:6;LETTER-SPACING:8;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2} </STYLE> </head> <BODY oncontextmenu='return false'>  <span id=menu2 style="position:absolute;Z-INDEX:40000;LEFT:395;TOP:210;color:#739EFE;cursor:hand;display:none;font-size:12px;font-family:宋体" onmouseover="if(event.srcElement.tagName=='roundrect'){event.srcElement.strokecolor='blue';event.srcElement.style.color='blue';event.srcElement.style.marginLeft=10}" onmouseout="if(event.srcElement.tagName=='roundrect'){event.srcElement.strokecolor='#739EFE';event.srcElement.style.color='#739EFE';event.srcElement.style.marginLeft=0}"> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>网格</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>矩阵</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>分界线</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>刷新</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>设置</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>项</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>项.</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>项..</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>项...</v:roundrect> <v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE onmouseup="menuclose(menu2,30)"> <v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>取消</v:roundrect> </span> </body> </html> 

注意:若代码中引入了外部JavaScript文件,在修改或查看代码后必须刷新页面,否则更改可能无法立即生效。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章