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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
JS功能代码集锦
May 04 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
浅谈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 Curl出现403错误的解决办法
2014/05/29 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python多进程multiprocessing用法实例分析
2017/08/18 Python
解决python报错MemoryError的问题
2018/06/26 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python telnet登陆功能实现代码
2020/04/16 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
银行演讲稿范文
2014/01/03 职场文书
给领导的致歉信范文
2014/01/13 职场文书
领导视察欢迎词
2014/01/15 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
JavaScript分页组件使用方法详解
2021/07/26 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
git中cherry-pick命令的使用教程
2022/06/25 Servers