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获取URL中的参数数据
Dec 05 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
Express之get,pos请求参数的获取
May 02 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python深入学习之内存管理
2014/08/31 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
python中PyQuery库用法分享
2021/01/15 Python
东方电视购物:东方CJ
2016/10/12 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
办理暂住证介绍信
2014/01/11 职场文书
农村党员一句话承诺
2014/05/30 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
死亡证明书样本说明
2014/10/18 职场文书
获奖感言一句话
2015/07/31 职场文书
欢送领导祝酒词
2015/08/12 职场文书
关于环保的广播稿
2015/12/17 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python