脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript在网页任意处点左键弹出隐藏菜单

javascript实现在网页任意处点左键弹出隐藏菜单的方法

 更新时间：2015年05月13日 10:01:00   投稿：shichen2014  
这篇文章主要介绍了javascript实现在网页任意处点左键弹出隐藏菜单的方法,设计鼠标事件及css样式操作的相关技巧,需要的朋友可以参考下

在网页的任意处点击左键就会弹出来，实际上是用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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS动画实现回调地狱promise的实例代码详解

    JS动画实现回调地狱promise的实例代码详解

    这篇文章主要介绍了JS动画实现回调地狱promise的实例代码详解,需要的朋友可以参考下
    2018-11-11
  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    这篇文章主要介绍了JavaScript实现点击单选按钮改变输入框中文本域内容的方法,涉及javascript单选按钮控制页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JavaScript获取并更改input标签name属性的方法

    JavaScript获取并更改input标签name属性的方法

    这篇文章主要介绍了JavaScript获取并更改input标签name属性的方法,涉及javascript针对表单元素属性的相关操作技巧,需要的朋友可以参考下
    2015-07-07
  • js获取div高度的代码

    js获取div高度的代码

    不错的获取div高度的代码，主要是方便测试一些信息，用到了javascript的offsetHeight属性
    2008-08-08
  • 关于小程序优化的一些建议(小结)

    关于小程序优化的一些建议(小结)

    这篇文章主要介绍了关于小程序优化的一些建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 学习javascript面向对象 掌握创建对象的9种方式

    学习javascript面向对象 掌握创建对象的9种方式

    这篇文章主要为大家介绍了创建对象的9种方式，帮助大家更好地学习javascript面向对象，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 前端JS面试中常见的算法问题总结

    前端JS面试中常见的算法问题总结

    虽然说在前端很少有机会接触到算法，大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。下面这篇文章就给大家总结了在前端JS面试中常见的算法问题，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • js 作用域和变量详解

    js 作用域和变量详解

    本文主要介绍了js 的作用域和变量的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JQuery 前台切换网站的样式实现

    JQuery 前台切换网站的样式实现

    本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要，因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。
    2009-06-06
  • Unicode 编码转换器

    Unicode 编码转换器

    Unicode 编码转换器...
    2007-01-01

最新评论