·您当前的位置:首页 > 技术教程 > JavaScript >

[js]JS代码自定义个性化右键菜单功能源代码范例

时间:2017-09-27 13:00酷播
[js]JS代码自定义个性化右键菜单功能源代码范例,[js]JS代码自定义个性化右键菜单功能源代码范例

[js]JS代码自定义个性化右键菜单功能源代码范例

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <title>JS实现自定义右键菜单</title> 
  5.     <meta http-equiv="content-type" content="text/html; charset=gbk"> 
  6.     <script src="http://api.51ditu.com/js/ajax.js"></script> 
  7.   
  8.     <style type="text/css"> 
  9.         #container { 
  10.             text-align : center; 
  11.             width : 500px; 
  12.             height : 500px; 
  13.             border : 1px solid blue; 
  14.             margin : 0 auto; 
  15.               
  16.         } 
  17.         .skin { 
  18.             width : 100px; 
  19.             border : 1px solid gray; 
  20.             padding : 2px; 
  21.             visibility : hidden; 
  22.             position : absolute; 
  23.         } 
  24.         div.menuitems { 
  25.             margin : 1px 0; 
  26.         } 
  27.         div.menuitems a { 
  28.             text-decoration : none; 
  29.         } 
  30.         div.menuitems:hover { 
  31.             background-color : #c0c0c0; 
  32.         } 
  33.     </style> 
  34. <script>      
  35. window.onload = function() { 
  36.       
  37.     var container = document.getElementById('container');   
  38.     var menu = document.getElementById('menu'); 
  39.       
  40.     /*显示菜单*/ 
  41.     function showMenu() { 
  42.   
  43.         var evt = window.event || arguments[0]; 
  44.           
  45.         /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ 
  46.         var rightedge = container.clientWidth-evt.clientX; 
  47.         var bottomedge = container.clientHeight-evt.clientY; 
  48.   
  49.         /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ 
  50.         if (rightedge < menu.offsetWidth)                
  51.             menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";             
  52.         else 
  53.         /*否则,就定位菜单的左坐标为当前鼠标位置*/ 
  54.             menu.style.left = container.scrollLeft + evt.clientX + "px"; 
  55.           
  56.         /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ 
  57.         if (bottomedge < menu.offsetHeight
  58.             menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; 
  59.         else 
  60.         /*否则,就定位菜单的上坐标为当前鼠标位置*/ 
  61.             menu.style.top = container.scrollTop + evt.clientY + "px"; 
  62.               
  63.         /*设置菜单可见*/ 
  64.         menu.style.visibility = "visible";              
  65.         LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble); 
  66.     } 
  67.     /*隐藏菜单*/ 
  68.     function hideMenu() { 
  69.         menu.style.visibility = 'hidden'
  70.     }                               
  71.     LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble); 
  72.     LTEvent.addListener(container,"contextmenu",showMenu); 
  73.     LTEvent.addListener(document,"click",hideMenu);                     
  74.       
  75. </script> 
  76.   </head> 
  77.     
  78.   <body> 
  79.       
  80.     <div id="menu" class="skin"> 
  81.         <div class="menuitems"> 
  82.             <a href="javascript:history.back();">后退</a> 
  83.         </div> 
  84.         <div class="menuitems"> 
  85.             <a href="javascript:history.back();">前进</a> 
  86.         </div> 
  87.         <hr> 
  88.         <div class="menuitems"> 
  89.             <a href="http://api.51ditu.com/" target="_blank">地图api</a> 
  90.         </div> 
  91.         <div class="menuitems"> 
  92.             <a href="http://www.cuplayer.com/traffic/index.html" target="_blank">实时交通</a> 
  93.         </div> 
  94.         <div class="menuitems"> 
  95.             <a href="http://www.cuplayer.com" target="_blank">地图搜索</a> 
  96.         </div> 
  97.         <div class="menuitems"> 
  98.             <a href="http://www.cuplayer.com" target="_blank">驾驶导航</a> 
  99.         </div> 
  100.         <hr> 
  101.         <div class="menuitems"> 
  102.             <a href="http://www.cuplayer.com" target="_blank">灵图UU</a> 
  103.         </div> 
  104.         <div class="menuitems"> 
  105.             <a href="http://www.cuplayer.com" target="_blank">路书下载</a> 
  106.         </div> 
  107.         <hr> 
  108.         <div class="menuitems"> 
  109.             <a href="http://www.cuplayer.com" target="_blank">关于本站</a> 
  110.         </div> 
  111.         <div class="menuitems"> 
  112.             <a href="http://www.cuplayer.com/link/link.html" target="_bland">友情链接</a> 
  113.         </div> 
  114.     </div> 
  115.       
  116.     <div id="container">      
  117.         <p>右键此区域</p> 
  118.     </div> 
  119.   </body> 
  120. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器