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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
vue中如何使用ztree
Feb 06 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
$()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
header()函数使用说明
2006/11/23 PHP
第五章 php数组操作
2011/12/30 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Node.js实现文件上传
2016/07/05 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python LMDB库的使用示例
2021/02/14 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
师说教学反思
2014/02/07 职场文书
小学教师师德感言
2014/02/10 职场文书
廉洁校园实施方案
2014/05/25 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
先进集体申报材料
2014/12/25 职场文书
催款函怎么写
2015/06/24 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript