javascript实现在网页任意处点左键弹出隐藏菜单的方法


Posted in Javascript onMay 13, 2015

在网页的任意处点击左键就会弹出来,实际上是用JS控制DIV层的显示,DIV层内嵌套的是一个表格,表格里放菜单,这样修改方便,不会CSS也没关系,你可以把它复制下来,用DW打开重新修改一下菜单样式,换成你自己喜欢的色彩

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏菜单</title>
<style type="text/css">
body {
 font: 9pt;
}
.box {
 font: 9pt "宋体";
 position: absolute;
 background: skyblue;
}
</style>
</head>
<body>
<table cellpadding="5" id="itemopen" class="box" style="display:none">
 <tr>
  <td bgcolor="#0066cc">网站导航:</td>
 </tr>
<tr>
  <td><a href="/">AJAX实例</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">jQuery相关</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">ExtJS演示</a></td>
 </tr>
</table>
</center>
</div>
<script language="JavaScript">
document.onclick = popUp 
function popUp() {
newX = window.event.x + document.body.scrollLeft
newY = window.event.y + document.body.scrollTop
menu = document.all.itemopen
 if ( menu.style.display == ""){
  menu.style.display = "none" }
 else {
   menu.style.display = ""}
  menu.style.pixelLeft = newX - 50
  menu.style.pixelTop = newY - 50
}
</script>
<body>
<p align="center"><font size="3">点击左键看看?</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
JS实现模拟风力的雪花飘落效果
May 13 #Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 #Javascript
浅谈javascript中的闭包
May 13 #Javascript
jQuery构造函数init参数分析续
May 13 #Javascript
jQuery构造函数init参数分析
May 13 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
浅谈python常用程序算法
2019/03/22 Python
python多线程使用方法实例详解
2019/12/30 Python
Python对wav文件的重采样实例
2020/02/25 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
本科毕业生自我鉴定
2013/11/02 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
会计稽核岗位职责
2015/04/13 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS