手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript鼠标右键菜单自定义效果
javascript鼠标右键菜单自定义效果
摘要:本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图:具体代码:#menu{border:so...

本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下

效果图:

javascript鼠标右键菜单自定义效果1

具体代码:

<html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-color:ghostwhite; margin: 0; padding: 0; list-style-type: none; } #menu>li{ border-bottom: dashed 1px gray; } </style> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById('menu'); document.oncontextmenu=function(ev){ var oEvent=ev||event; //一定要加px,要不然chrom不认 oUl.style.top=oEvent.clientY+'px'; oUl.style.left=oEvent.clientX+'px'; oUl.style.display='block'; return false; } document.onclick=function(){ oUl.style.display='none'; } }; </script> </head> <body> <ul id="menu"> <li><a href="http://www.jb51.net/" target="_blank">查字典教程网</a></li> <li><a href="http://www.jb51.net/" target="_blank">查字典教程网</a></li> <li><a href="http://www.jb51.net/" target="_blank">查字典教程网</a></li> <li><a href="http://www.jb51.net/" target="_blank">查字典教程网</a></li> </ul> </body> </html>

希望本文所述对大家学习javascript程序设计有所帮助。

【javascript鼠标右键菜单自定义效果】相关文章:

基于JavaScript实现智能右键菜单

JavaScript中继承用法实例分析

javascript实现链接单选效果

javaScript中slice函数用法实例分析

Javascript 字符串模板的简单实现

javascript实现模拟时钟的方法

javascript实现dom动态创建省市纵向列表菜单的方法

解析javascript中鼠标滚轮事件

javascript无刷新评论实现方法

javascript自定义右键弹出菜单实现方法

精品推荐
分类导航