JS代码完成左键弹出式菜单|萝卜系统

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

JS代码实现左键弹出式菜单

【实例描述】

在默认的网页中，使用右键可以弹出常用的操作菜单。本例学习使用左键弹出网站的导航菜单。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页-本站（www.xue51.com）</title>
<style type="text/css">
a.{ font: 9pt "宋体"; cursor: hand; font-size: 9pt ; 
color: #ffffff; text-decoration: none }
a:active{ font: 9pt "宋体"; cursor: hand; color: #FF0033 }
a.cc:hover{ font: 9pt "宋体"; cursor: hand; color: #FF0033}
.box{ font: 10pt "宋体"; position: absolute;  
background: #ccbbcc }
</style>
<script language="JavaScript">
function popUp() 
{
newX = window.event.x + document.body.scrollLeft;
newY = window.event.y + document.body.scrollTop;
menu = document.all.menutable;
if ( menu.style.display == "")
{
menu.style.display = "none" }
else {
menu.style.display = "";}
menu.style.pixelLeft = newX - 50;
menu.style.pixelTop = newY - 50;
}
</script>
需要在body的onclick事件中调用上面的方法，同时设置一个table，实现菜单效果。代码如下所示：

</head>
<body onclick = popUp()>
<table id="menutable" class="box" 
style="display:none;width=120">
<tr>
<td>弹出菜单</td>
</tr>
<tr>
<td><a href="#" class="cc">本站搜索</a></td>
</tr>
<tr>
<td><a href="#" class="cc">本站帮助</a></td>
</tr>
<tr>
<td><a href="#" class="cc">当前更新</a></td>
</tr>
<tr>
<td><a href="#" class="cc">联系版主</a></td>
</tr>
</table>
</body>
</html>
【运行效果】

左键弹出式菜单运行效果

【难点剖析】

本例利用了CSS中的隐藏特性。将一个设置好的表格先隐藏起来，当用户单击鼠标左键时，设置“display”属性就可以实现表格的显示。

【源码下载】

如果你不愿复制代码及提高代码准确性，你可以点击：左键弹出式菜单进行本实例源码下载

使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

……

标签:JS代码完成左键弹出式菜单