简单jQuery右键弹出菜单特效

    一款简单的网页右键弹出菜单特效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,#menu,#menu li,#menu a{margin:0; padding:0; font-size:12px; color:#000; text-decoration:none;}
#menu{padding:5px; width:128px; height:250px; position:absolute; top:100px; left:100px; box-shadow:1px 1px 3px #000; border-radius:3px; display:none;}
#menu li{text-align:center; margin-top:5px; margin-bottom:5px; list-style:none;}
#menu li a{display:block; height:20px; line-height:20px;}
#menu li a:hover{background:#B7CBCA; color:#fff;}
.borderbottom{border-bottom:1px solid #B7CBCA;}
.colorgray{color:#A9A9A9}
</style>

3、引入html代码：

<ul id="menu">
    <li><a href="###">显示桌面</a></li>
    <li onclick="history.go(0)" 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>

4、引入js代码：

<script type="text/javascript">
$(function(){
    $(this).bind("contextmenu",function(e){   //禁止鼠标右键弹出的默认菜单
          return false;   
    }).mousedown(function(e){
        var ul = $("ul#menu");
        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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！