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 学习笔记 错误处理
Jul 30 Javascript
js字符编码函数区别分析
Dec 28 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
js实现无缝循环滚动
Jun 23 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 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
让PHP更快的提供文件下载的代码
2012/06/13 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
json简单介绍
2008/06/10 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python基础教程项目四之新闻聚合
2018/04/02 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
应届毕业生求职信
2014/05/26 职场文书
平安家庭事迹材料
2014/12/20 职场文书
创业计划书之美甲店
2019/09/20 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Python入门学习之类的相关知识总结
2021/05/25 Python
Go语言入门exec的基本使用
2022/05/20 Golang