jQuery右键美化菜单单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery右键美化菜单单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<title>jQuery右键美化菜单特效</title>
<style type="text/css">
body{ position:relative;}
ul,li{ margin:0; padding:0; list-style:none; font-size:12px;}
.popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;}
.popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;}
.popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius:5px;}
</style>
</head>
<body>
<script type="text/javascript">
var kyoPopupMenu={};
	kyoPopupMenu = (function(){
    return {
        sys: function (obj) {
			$('.popup_menu').remove();
            popupMenuApp = $('<div class="popup_menu app-menu"><ul><li><a menu="menu1">内容</a></li><li><a menu="menu2">首页</a></li><li><a menu="menu3">jquery脚本</a></li></ul></div>')
			.find('a').attr('href','javascript:;')
			.end().appendTo('body');
			//绑定事件
			$('.app-menu a[menu="menu1"]').on('click', function (){
				window.location.href="#";
            });
			$('.app-menu a[menu="menu2"]').on('click', function (){
				window.location.href="#";
            });
			$('.app-menu a[menu="menu3"]').on('click', function (){
				 window.location.href="#";
            });
			return popupMenuApp;
		}
	}})();
	//取消右键
	$('html').on('contextmenu', function (){return false;}).click(function(){
		$('.popup_menu').hide();
	});
	//桌面点击右击
    $('html').on('contextmenu',function (e){
    	var popupmenu = kyoPopupMenu.sys();
      	l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
      	t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
      	popupmenu.css({left: l,top: t}).show();
      	return false;
    });
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)