视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[js]js写的右键、右键菜单代码（实测可用的代码）

时间:2017-10-24 16:30酷播
[js]js写的右键代码（实测可用的代码）[js]js写的右键代码（实测可用的代码）

[js]js写的右键代码（实测可用的代码）

  1. <html>      
  2.     <head>        
  3.         <title>JS实现自定义右键菜单</title>   
  4.         <meta http-equiv="content-type" content="text/html; charset=gbk">   
  5.         <script src="http://api.51ditu.com/js/ajax.js"></script>   
  6.         <style type="text/css">   
  7.             #container {   
  8.                 text-align:center;   
  9.                 width : 800px;   
  10.                 height : 800px;   
  11.                 border : 1px solid blue;   
  12.                 margin : 0 auto;   
  13.             }   
  14.             .skin {   
  15.                 width : 100px;   
  16.                 border : 1px solid gray;   
  17.                 padding : 2px;   
  18.                 visibility : hidden;   
  19.                 position : absolute;   
  20.             }   
  21.             div.menuitems {   
  22.                 margin : 1px 0;   
  23.             }   
  24.             div.menuitems a {   
  25.                 text-decoration : none;   
  26.             }            
  27.             div.menuitems:hover {   
  28.                 background-color : #c0c0c0;   
  29.             }        
  30.            </style>    
  31.            <script>   
  32.             window.onload = function() {   
  33.                 var container = document.getElementById('container');   
  34.                 var menu = document.getElementById('menu');   
  35.                 /*显示菜单*/        
  36.                 function showMenu() {    
  37.                     var evt = window.event || arguments[0]; /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/   
  38.                     var rightedge = container.clientWidth-evt.clientX;   
  39.                     var bottomedge = container.clientHeight-evt.clientY;                       
  40.                     /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/            
  41.                     if (rightedge < menu.offsetWidth)    
  42.                         menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";    
  43.                     else  /*否则，就定位菜单的左坐标为当前鼠标位置*/   
  44.                         menu.style.left = container.scrollLeft + evt.clientX + "px";    
  45.                        
  46.                     /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/   
  47.                     if (bottomedge < menu.offsetHeight)   
  48.                         menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";      
  49.                     else  /*否则，就定位菜单的上坐标为当前鼠标位置*/    
  50.                         menu.style.top = container.scrollTop + evt.clientY + "px";    
  51.                     /*设置菜单可见*/            
  52.                     menu.style.visibility = "visible";   
  53.                     LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);        
  54.                 }        
  55.                    
  56.                 /*隐藏菜单*/        
  57.                 function hideMenu() {            
  58.                     menu.style.visibility = 'hidden';   
  59.                 }   
  60.                 LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);   
  61.                 LTEvent.addListener(container,"contextmenu",showMenu);   
  62.                 LTEvent.addListener(document,"click",hideMenu);   
  63.             }          
  64.             </script>      
  65.             </head>   
  66.             <body>   
  67.             <div id="menu" class="skin">   
  68.                 <div class="menuitems"><a href="javascript:add(event);">添加链接</a></div>   
  69.                 <hr>   
  70.                 <div class="menuitems"><a href="javascript:returnValue();">关闭链接</a></div>   
  71.             </div>   
  72.             <div id="container"><p>右键此区域</p></div>   
  73.       </body>   
  74. </html>   

 

热门文章推荐

请稍候...

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

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