视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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.       
  76. </script> 
  77.   </head> 
  78.     
  79.   <body> 
  80.       
  81.     <div id="menu" class="skin"> 
  82.         <div class="menuitems"> 
  83.             <a href="javascript:history.back();">后退</a> 
  84.         </div> 
  85.         <div class="menuitems"> 
  86.             <a href="javascript:history.back();">前进</a> 
  87.         </div> 
  88.         <hr> 
  89.         <div class="menuitems"> 
  90.             <a href="http://api.51ditu.com/" target="_blank">地图api</a> 
  91.         </div> 
  92.         <div class="menuitems"> 
  93.             <a href="http://www.cuplayer.com/traffic/index.html" target="_blank">实时交通</a> 
  94.         </div> 
  95.         <div class="menuitems"> 
  96.             <a href="http://www.cuplayer.com" target="_blank">地图搜索</a> 
  97.         </div> 
  98.         <div class="menuitems"> 
  99.             <a href="http://www.cuplayer.com" target="_blank">驾驶导航</a> 
  100.         </div> 
  101.         <hr> 
  102.         <div class="menuitems"> 
  103.             <a href="http://www.cuplayer.com" target="_blank">灵图UU</a> 
  104.         </div> 
  105.         <div class="menuitems"> 
  106.             <a href="http://www.cuplayer.com" target="_blank">路书下载</a> 
  107.         </div> 
  108.         <hr> 
  109.         <div class="menuitems"> 
  110.             <a href="http://www.cuplayer.com" target="_blank">关于本站</a> 
  111.         </div> 
  112.         <div class="menuitems"> 
  113.             <a href="http://www.cuplayer.com/link/link.html" target="_bland">友情链接</a> 
  114.         </div> 
  115.     </div> 
  116.       
  117.     <div id="container">      
  118.         <p>右键此区域</p> 
  119.     </div> 
  120.   </body> 
  121. </html> 

 

热门文章推荐

请稍候...

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

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