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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JS继承用法实例分析
Feb 05 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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实现创建验证码实例解析
2014/07/31 PHP
Yii框架form表单用法实例
2014/12/04 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python+flask实现API的方法
2018/11/21 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python简单区块链模拟详解
2019/07/03 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
班长演讲稿范文
2014/04/24 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
golang为什么要统一错误处理
2022/04/03 Golang