js右击菜单

1.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
		<link rel="stylesheet" href="css/zhuomian.css" />
	</head>
	<style>
	</style>
	<body>
		<div class='on'>
			<ul>
				<li>添加应用</li>
				<li>获取课程</li>
				<li>添加笔记</li>
				<li class="iii">刷新</li>
				<li>上传资料</li>
				<li class='aaa'>更换背景</li>
				<li>注销</li>
			</ul>
		</div>
		<script >
			window.document.oncontextmenu=function(){
				return false
			}
			$('.on').mousedown(function(e){ 
	          if(3 == e.which){ 
	          	$('ul').show();
	          	if($('.on').width()-e.clientX<$('ul').width()){
	          		$('.ul').css('left',(e.clientX)+'px')}
	          	else{
	          		$('ul').css('left',e.clientX+'px')
	          	}
	          	if($('.on').height()-e.clientY<$('ul').height()){
	          		$('ul').css('top',(e.clientY-200)+'px')}
	          	else{
	          		$('ul').css('top',e.clientY)
	          	}
	          }
	       }
	   </script>
	</body>
</html>

2.css代码

			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width:100%;
				height:100%;
			}
			.on{
				width:100%;
				height:100%;
				position:relative;
			}
			ul{
				background-color: white;
				border:1px solid #b0aaae;
				width: 120px;
				height: 200px;
				position: absolute;
				display: none;
				color:#b0aaae;
				cursor:pointer;
			}
			ul li{
				list-style: none;
				width: 100px;
				margin-left:25px;
				margin-top: 5px;
			}
posted @ 2021-03-06 14:30  倔强的烤马铃薯  阅读(9)  评论(0)    收藏  举报  来源