JS将IE右键菜单打造成Windows右键风格

发布时间：2018-08-16 22:04:10 所属栏目：创业来源：站长网

导读：JS将IE右键菜单打造成Windows右键风格 Java Script模拟一个IE右键菜单，还没有屏蔽右键，这个相对简单，大家自己把IE固有的右键屏蔽掉吧。改制的右键风格尽量与系统右键一致。特效代码： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN ht

　　JavaScript模拟一个IE右键菜单，还没有屏蔽右键，这个相对简单，大家自己把IE固有的右键屏蔽掉吧。改制的右键风格尽量与系统右键一致。

　　特效代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>模拟IE右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{ margin:0; padding:0; } .menu{ width:170px; display:none; position:absolute; background-color:#FCFDE1; cursor:default; } ol{ list-style:none; width:170px; font-size:13px; border:1px #aaa solid; padding:0px 3px; } ol li{ padding:4px 20px; text-align:right; } span{ float:left; } .u{ border-bottom:1px #aaa solid; } #over{ background-color:#0033FF; color:white; } </style> <script type="text/javascript"> var left; var top; var flag; window.onload = function(){ document.onmouseup = mouseUpHandler; } function mouseUpHandler(e){ var evt = e || window.event; var oMenu = document.getElementById("menu"); oMenu.style.display = (oMenu.style.display != "block") ? "block":"none"; oMenu.style.left = left = evt.clientX; oMenu.style.top = top = evt.clientY; var oLis = oMenu.getElementsByTagName('li'); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover = mouseOverHandler; oLis[i].onmouseout = mouseOutHandler; } } function mouseOverHandler(e){ var _this = this; this.id = 'over'; if(this.name == 'del'){ var oDel = document.getElementById("del"); oDel.style.display = 'block'; oDel.style.left = left + this.offsetWidth; oDel.style.top = top + this.offsetTop; oDel.onmouseover = function(){ _this.id = 'over'; this.style.display = 'block'; } oDel.onmouseout = function(){ this.style.display = 'none'; _this.id = ''; } var oLis = oDel.getElementsByTagName('li'); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover = mouseOverHandler; oLis[i].onmouseout = mouseOutHandler; oLis[i].onclick = function(){ oDel.style.display = 'none'; } } } } function mouseOutHandler(e){ if(flag)return false; this.id = ''; if(this.name == 'del'){ var oDel = document.getElementById("del"); oDel.style.display = 'none'; } } </script> </head> <body> <div class='menu' id='menu'> <ol> <li>撤销(U)<label>Ctrl+Z</label></li> <li class='u'disabled>重做(Z)<label>Ctrl+Y</label></li> <li>粘贴(P)<label>Ctrl+V</label></li> <li name="del">删除(D)<label>></label></li> <li class='u'>选择(S)<label>></label></li> <li>格式(F)<label>></label></li> <li>大小写转换(N)<label>></label></li> <li>插入(I)<label>></label></li> <li>HTML(H)<label>></label></li> <li class='u'>其他(E)<label>></label></li> <li>换行符<label>></label></li> <li>拼写检查<label>></label></li> </ol> </div> <div class='menu' id='del'> <ol> <li>删除所选(D)<label>Ctrl+Z</label></li> <li>删除单词(W)<label>Ctrl+Y</label></li> <li>删除行(L)<label>Ctrl+V</label></li> <li>删除至单词结尾(E)</li> <li>删除至行尾(N)</li> <li class='u'>反向删除单词(O)</li> <li disabled>删除标记行</li> <li>删除空白行</li> <li>删除重复行</li> </ol> </div> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

穗港科研团队首建真正	邓丽君引爆虚拟人板块
比亚迪成立电池公司，	自称新势力2.0，电动屋