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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
浅谈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
PHP4和PHP5共存于一系统
2006/11/17 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
React中的render何时执行过程
2018/04/13 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python中的枚举类型示例介绍
2019/01/09 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
教师演讲稿范文
2014/01/08 职场文书
运动会广播稿100字
2014/01/11 职场文书
旷课检讨书3000字
2014/02/04 职场文书
老公出轨后的保证书
2015/05/08 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL