简单的jQuery右键弹出菜单代码
- 作者：网页模板
- 大小：0MB
- 点击次数：
- 发布时间：2014-05-27 16:56
特效介绍
简单的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>
- 本文标签：
- jQuery右键代码,jQuery弹出菜单
