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" />
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<title>jQuery鼠标右击显示菜单代码</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.notice.js"></script>

<style type="text/css">
.document-class {
	width:200px;
	border: 1px solid #CCCCCC;
	position: absolute;
	display: none;
	background: #ffffff;
	z-index: 9999;
}

.document-class ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

.document-class ul li {
	line-height: 30px;
	text-indent: 20px;
}
.document-class ul li a {
	color: #000000;
	text-decoration: none;
}
</style>

</head>
<body>

<div style="text-align: center; line-height: 30px;">右击，查看效果</div>

<div class="document-class">
    <ul>
        <li><a href="#" target="_blank">百度</a></li>
        <li><a href="#" target="_blank">百度</a></li>
        <li><a href="#" target="_blank">百度</a></li>
    </ul>
</div>

<script type="text/javascript">
$(function () {
	 $.mouseMoveShow('.document-class');
	 $.disabledContextMenu();
});
</script>
</body>
</html>

JS代码(jquery.notice.js):

;
	(function ($){
	$.extend({
	/** * 获取鼠标移动的位置，改变DIV层的位置 * @param obj 传入 document 元素 类名 */
 'mouseMoveShow':function (obj){
	var pageX = 0;
	var pageY = 0;
	var doc = $(document);
	var width = doc.width();
	var height = doc.height();
	var marginWidth = 5;
	var documentClass = $(obj);
	doc.mousemove(function (e){
	pageX = e.pageX;
	pageY = e.pageY;
	if (pageX + documentClass.width() >= width){
	pageX = pageX - documentClass.width() - marginWidth;
}
if (pageY + documentClass.height() >= height){
	pageY = pageY - documentClass.height() - marginWidth;
}
//dblclick 双击 click 单击 doc.on({
	/** * 右点击 * @param e */
 "mousedown":function (e){
	if (3 == e.which){
	documentClass.css({
	'left':pageX,'top':pageY}
).show();
}
}
,/** * 点击 */
 "click":function (){
	documentClass.hide();
}
}
);
}
);
}
,/** * 禁用右键 */
 'disabledContextMenu':function (){
	document.oncontextmenu = function (){
	return false;
}
}
}
);
}
)(jQuery);

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