Jquery 右键菜单示例

最新推荐文章于 2025-06-25 09:08:23 发布

原创最新推荐文章于 2025-06-25 09:08:23 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

HTML + CSS 同时被 2 个专栏收录

30 篇文章

订阅专栏

JS JQUERY

28 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的自定义右键菜单。通过禁用默认的浏览器右键菜单，并利用鼠标事件来显示一个定制化的菜单，包含多个选项如“文件”、“新建”等，同时详细解释了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分：

		<script type="text/javascript" src="f:/java/js/jquery.js"> </script>
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{background:#183;}
			.menu{width:150px;height:auto;border:1px solid #666;box-shadow:1px 1px 15px #ccc;background:#fff;display:none;position:absolute;}
			.menu ul li{height:30xp;line-height:30px;border-bottom:1px solid #ccc;font-size:14px;font-family:"黑体";list-style:none;}
			.menu .m_ico{width:20px;height:20px;display:block;float:left;background:url("images/icon-ui.png");background-position:-49px 85px;margin-top:5px;margin-right:15px;margin-left:15px;}
			.menu ul li:hover{background:#f2f2f2;cursor:pointer;color:#183;}
		</style>

HTML部分：

<div class="menu">
	<ul>
		<li><i class="m_ico"></i>文件</li>
		<li><i class="m_ico"></i>新建</li>
		<li><i class="m_ico"></i>删除</li>
		<li><i class="m_ico"></i>保存</li>
		<li><i class="m_ico"></i>刷新</li>
		<li><i class="m_ico"></i>属性</li>
	</ul>
</div>

JS部分：

<script type="text/javascript">
	/* 屏蔽网页右键的系统菜单*/
	document.oncontextmenu=function(){
		return false;
	}

	/* 鼠标事件 */
	$(document).mousedown(function(e){
		var key = e.which;  //获取鼠标键;
		if(key===3){
			var X = e.clientX;
			var Y = e.clientY;
			//$(".menu").css({"margin-top":Y,"margin-left":X}).fadeIn('slow');   //方法一
			$(".menu").css({top:Y,left:X}).fadeIn('slow');						 //方法二
		}
		if(key===1){
			$(".menu").fadeOut('normal');
		}
	});


	/* 执行右键选项 */
	$(".menu").find("li").click(function(){
		var _index = $(this).index();
		var text = $(".menu").find("li").eq(_index).text();
		alert("您执行了:"+text);
	});

	/* 右键菜单高度 
	alert($(".menu").height());
	*/

	/* 浏览器的可见高度 
	alert(document.body.clientHeight);  
	alert(document.documentElement.clientHeight);
	*/

	/* 浏览器的可见宽度
	alert(document.body.clientWidth);
	alert(document.documentElement.clientWidth);
	*/


</script>