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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
javascript cookie的简单应用
Feb 24 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
php四种基础算法代码实例
2013/10/29 PHP
php简单判断文本编码的方法
2015/07/30 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python实现句子翻译功能
2017/11/14 Python
python安装pil库方法及代码
2019/06/25 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
俄罗斯女装店:12storeez
2019/10/25 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
小学生家长评语大全
2014/02/10 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
公司承诺书范文
2014/05/19 职场文书
施工安全标语
2014/06/07 职场文书
社区务虚会发言材料
2014/10/20 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL
vue特效之翻牌动画
2022/04/20 Vue.js