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 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
纯JS实现简单的日历
Jun 26 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
vue实现提示保存后退出的方法
Mar 15 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
小程序自定义轮播图圆点组件
Jun 25 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生成静态页面详解
2006/11/19 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
Javascript缓存API
2016/06/14 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python动态文本进度条的实例代码
2020/01/22 Python
如何完美的建立一个python项目
2020/10/09 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
《风娃娃》教学反思
2014/04/19 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
免职通知
2015/04/23 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫