CSS3之重新定义鼠标右键

效果图：

html:

	<div id="rightkey">

		<ul>

			<li><img src="images/xmgl.png" alt="" /><div>项目管理</div></li>

			<li><img src="images/bbzx.png" alt="" /><div>我的项目</div></li>

			<li class="line"></li>

			<li><img src="images/jqgl.png" alt="" /><div>我的项目</div></li>

			<li><img src="images/scgl.png" alt="" /><div>我的项目</div></li>

			<li><img src="images/jqgl.png" alt="" /><div>我的项目</div></li>

			<li><img src="images/scgl.png" alt="" /><div>我的项目</div></li>

		</ul>

	</div>

css:

html,body{margin: 0;padding: 0;background-color: #eee;}

#rightkey{position: fixed;display: none;width: 200px;height: 230px;z-index: 1000;padding: 10px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #fff;border: 1px solid transparent;border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-o-box-shadow: 0 6px 12px rgba(0,0,0,.175);-ms-box-shadow:0 6px 12px rgba(0,0,0,.175);background-clip: padding-box;}

#rightkey ul{margin: 0;padding: 0;list-style-type: none;overflow: hidden;}

#rightkey li{width: 100%;height: 20px;cursor: pointer;line-height: 20px;padding: 8px 15px;font-size: 16px;overflow: hidden;}

#rightkey li:hover{background-color: rgb(245,245,245);}

#rightkey img{width: 20px;height: 20px;border-radius: 10px;display: block;float: left;margin-right: 10px;background-color: red;}

#rightkey div{width: 150px;height: 16px;float: left;}

#rightkey .line{padding: 0;margin: 5px 0;width: 100%;height: 1px;background-color: #ddd;}

　　js:

	document.oncontextmenu=function(){return false;};

	var initx=0,inity=0;

	var rightkey=$("#rightkey");

	$(document).mousedown(function(e){

		var rightwidth=rightkey.width()+10;

		var rightheight=rightkey.height()+45;

		var x=e.screenX+10;

		var y=e.screenY-50;

		if(3 == e.which){

			initx=x;

			inity=y;	

			rightkey.css({"top":y,"left":x,"display":"block"});

		}else if(1 == e.which){

			var dx=x-initx;

			var dy=y-inity;

			if(!(dx <= rightwidth && dx >=0 && dy>=0 && dy <= rightheight)){

				rightkey.css("display","none");

			}

		}

	});



	rightkey.find("li").click(function(){

		alert($(this).html());

		rightkey.css("display","none");

	})