js右键菜单效果代码


Posted in Javascript onJuly 21, 2007

将以下代码添加到<head>与</head>之间 
---------------------------------- 

<script language='javascript'> 
/*******以下内容可以修改***************/ 
var mname=new Array( 
"首  页", 
"修  改", 
"下  载", 
"删  除", 
"新  建", 
"刷  新" 
); 
//mname是菜单对应的名称,数组的个数必须与下面murl对应 

var murl=new Array( 
"window.open('http://www.cn5.cn','_blank','');", 
"alert('修改');", 
"alert('download');", 
"alert('delete');", 
"alert('new');", 
"alert('refresh');" 
); 
//murl是菜单对应的操作,可以是任意javascript代码但是要注意不要在里面输入\",只能用' 
//如果要实现跳转可以这样window.location='url';  
var ph=18,mwidth=50;//每条选项的高度,菜单的总宽度 
var bgc="#eee",txc="black";//菜单没有选中的背景色和文字色 
var cbgc="darkblue",ctxc="white";//菜单选中的选项背景色和文字色 

/****************以下代码请不要修改******************/ 
var mover="this.style.background='"+cbgc+"';this.style.color='"+ctxc+"';" 
var mout="this.style.background='"+bgc+"';this.style.color='"+txc+"';" 

document.oncontextmenu=function() 
{  
 mlay.style.display=""; 
 mlay.style.pixelTop=event.clientY; 
 mlay.style.pixelLeft=event.clientX; 
 return false; 

function showoff() 

 mlay.style.display="none"; 

function fresh() 

 mlay.style.background=bgc; 
 mlay.style.color=txc; 
 mlay.style.width=mwidth; 
 mlay.style.height=mname.length*ph; 
 var h="<table width=100% height="+mname.length*ph+"px cellpadding=0  cellspacing=0 border=0>"; 
 var i=0; 
 for(i=0;i<mname.length;i++) 
 { 
  h+="<tr align=center height="+ph+" onclick=\""+murl[i]+"\" onMouseover=\""+mover+"\" onMouseout=\""+mout+"\"><td style='font-size:9pt;'>"+mname[i]+"</td></tr>"; 
 } 
 h+="</table>"; 
 mlay.innerHTML=h; 

</script> 

---------------------------------- 
将以下代码替换<body>标签 
---------------------------------- 
<body onClick="showoff();" onload="fresh();">
---------------------------------- 
在<body>与</body>之间插入以下代码 
---------------------------------- 
<div id="mlay" style="position:absolute;display:none;cursor:default;" onClick="return false;"></div>
---------------------------------- 
完!!! 
:) 

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
$()JS小技巧
Jul 21 #Javascript
IE 缓存策略的BUG的解决方法
Jul 21 #Javascript
用JS实现的一个include函数
Jul 21 #Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 #Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 #Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
You might like
Yii框架分页实现方法详解
2017/05/20 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
深入浅析python with语句简介
2018/04/11 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python实现字符串和数字拼接
2020/03/02 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
会计学个人自荐信模板
2013/12/13 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
介绍信如何写
2015/01/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js