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 String 对象
Apr 25 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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源码之 ext/mysql扩展部分
2009/07/17 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
javascript 定义新对象方法
2010/02/20 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python匿名函数的使用方法解析
2019/10/10 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
品学兼优的大学生自我评价
2013/09/20 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
党员学习十八大感想
2014/01/17 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
个人欠条范本
2015/07/03 职场文书
重阳节主题班会
2015/08/17 职场文书
七年级作文之秋游
2019/10/21 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python