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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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生成静态页
2006/11/25 PHP
php socket方式提交的post详解
2008/07/19 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python轮询机制控制led实例
2020/05/03 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python 动态绘制爱心的示例
2020/09/27 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
食品安全演讲稿
2014/09/01 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis