JS實現自定義右鍵菜單


靈圖時做的,效果如下

 

Demo效果圖

Demo源碼如下

<!DOCTYPE html>
<html>
  <head>
    <title>JS實現自定義右鍵菜單</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
    <script src="http://api.51ditu.com/js/ajax.js"></script>

	<style type="text/css">
		#container {
			text-align : center;
			width : 500px;
			height : 500px;
			border : 1px solid blue;
			margin : 0 auto;
			
		}
		.skin {
			width : 100px;
			border : 1px solid gray;
			padding : 2px;
			visibility : hidden;
			position : absolute;
		}
		div.menuitems {
			margin : 1px 0;
		}
		div.menuitems a {
			text-decoration : none;
		}
		div.menuitems:hover {
			background-color : #c0c0c0;
		}
	</style>
<script>		
window.onload = function() {
	
	var container = document.getElementById('container');	
	var menu = document.getElementById('menu');
	
	/*顯示菜單*/
	function showMenu() {

		var evt = window.event || arguments[0];
		
		/*獲取當前鼠標右鍵按下后的位置,據此定義菜單顯示的位置*/
		var rightedge = container.clientWidth-evt.clientX;
		var bottomedge = container.clientHeight-evt.clientY;

		/*如果從鼠標位置到容器右邊的空間小於菜單的寬度,就定位菜單的左坐標(Left)為當前鼠標位置向左一個菜單寬度*/
		if (rightedge < menu.offsetWidth) 				
			menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";				
		else
		/*否則,就定位菜單的左坐標為當前鼠標位置*/
			menu.style.left = container.scrollLeft + evt.clientX + "px";
		
		/*如果從鼠標位置到容器下邊的空間小於菜單的高度,就定位菜單的上坐標(Top)為當前鼠標位置向上一個菜單高度*/
		if (bottomedge < menu.offsetHeight)
			menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
		else
		/*否則,就定位菜單的上坐標為當前鼠標位置*/
			menu.style.top = container.scrollTop + evt.clientY + "px";
			
		/*設置菜單可見*/
		menu.style.visibility = "visible";				
		LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);
	}
	/*隱藏菜單*/
	function hideMenu() {
		menu.style.visibility = 'hidden';
	}								
	LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);
	LTEvent.addListener(container,"contextmenu",showMenu);
	LTEvent.addListener(document,"click",hideMenu);						
}
	
</script>
  </head>
  
  <body>
	
	<div id="menu" class="skin">
		<div class="menuitems">
			<a href="javascript:history.back();">后退</a>
		</div>
		<div class="menuitems">
			<a href="javascript:history.back();">前進</a>
		</div>
		<hr>
		<div class="menuitems">
			<a href="http://api.51ditu.com/" target="_blank">地圖api</a>
		</div>
		<div class="menuitems">
			<a href="http://www.51ditu.com/traffic/index.html" target="_blank">實時交通</a>
		</div>
		<div class="menuitems">
			<a href="http://www.51ditu.com" target="_blank">地圖搜索</a>
		</div>
		<div class="menuitems">
			<a href="http://nav.51ditu.com" target="_blank">駕駛導航</a>
		</div>
		<hr>
		<div class="menuitems">
			<a href="http://uu.51ditu.com" target="_blank">靈圖UU</a>
		</div>
		<div class="menuitems">
			<a href="http://lushu.51ditu.com" target="_blank">路書下載</a>
		</div>
		<hr>
		<div class="menuitems">
			<a href="http://www.lingtu.com" target="_blank">關於本站</a>
		</div>
		<div class="menuitems">
			<a href="http://emap.51ditu.com/link/link.html" target="_bland">友情鏈接</a>
		</div>
	</div>
	
	<div id="container">		
		<p>右鍵此區域</p>
	</div>
  </body>
</html>

  


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com