特效介绍
简单的jQuery右键弹出菜单代码。
运行下面的代码,对着空白的页面右键单击查看效果:
提示:您可以先修改部分代码再运行
使用方法
1、引入jQuery库:<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>2、引入下面的css:
<style type="text/css"> body{position:relative;} body,ul,li,a{margin:0; padding:0; font-size:12px; color:#000; text-decoration:none;} ul{padding:5px; width:128px; height:250px; position:absolute; top:100px; left:100px; box-shadow:1px 1px 3px #000; border-radius:3px; display:none;} li{text-align:center; margin-top:5px; margin-bottom:5px; list-style:none;} li a{display:block; height:20px; line-height:20px;} li a:hover{background:#B7CBCA; color:#fff;} .borderbottom{border-bottom:1px solid #B7CBCA;} .colorgray{color:#A9A9A9} </style>3、引入下面的js和html:
<ul> <li><a href="###">显示桌面</a></li> <li class="borderbottom"><a href="#">刷新</a></li> <li><a href="http://www.5imoban.net/psdmoban">PSD模板</a></li> <li><a href="http://www.5imoban.net/cssmoban">CSS模板</a></li> <li><a href="http://www.5imoban.net/texiao">网页特效</a></li> <li class="borderbottom"><a href="http://www.5imoban.net/jiaocheng">建站教程</a></li> <li><a href="###" class="colorgray">粘贴</a></li> <li><a href="###" class="colorgray">粘贴快捷方式</a></li> <li class="borderbottom"><a href="###" class="colorgray">撤销删除</a></li> <li><a href="###">属性</a></li> </ul> <script type="text/javascript"> $(function(){ $(this).bind("contextmenu",function(e){ //禁止鼠标右键弹出的默认菜单 return false; }).mousedown(function(e){ var ul = $("ul"); if(e.which == 3){ //判断鼠标是否右键 ul.hide(); //这里可得到鼠标X坐标 var pointX = e.pageX; //这里可以得到鼠标Y坐标 var pointY = e.pageY; ul.css("left",pointX+"px").css("top",pointY+"px").show(300); }else{ ul.hide(); } }) }) </script>