标签:
效果图:
html:
<div id="rightkey"> <ul> <li><img src="images/xmgl.png" /><div>项目管理</div></li> <li><img src="images/bbzx.png" /><div>我的项目</div></li> <li class="line"></li> <li><img src="images/jqgl.png" /><div>我的项目</div></li> <li><img src="images/scgl.png" /><div>我的项目</div></li> <li><img src="images/jqgl.png" /><div>我的项目</div></li> <li><img src="images/scgl.png" /><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"); })
标签:
原文地址:http://www.cnblogs.com/xuhang/p/4572383.html