JavaScript 在网页上单击鼠标的地方显示层及关闭层

在网页上单击鼠标的地方显示层，供用户选择地点，同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。复制代码代码如下: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>层的隐藏显示练习</TITLE> <STYLE type="text/css">  </STYLE> <SCRIPT language="javascript" > function showMe() { document.getElementById("placeLayer").style.left=event.x; document.getElementById("placeLayer").style.top=event.y; document.getElementById("placeLayer").style.display="block"; } function selectPlace(place) { document.myform.placeButton.value=place; document.getElementById("placeLayer").style.display="none"; } function closeMe( ) { document.getElementById("placeLayer").style.display="none"; } </SCRIPT> </HEAD> <BODY> <FORM name="myform" method="post" action=""> <TABLE width="58%" height="296" border="0" align="center" background="images/51table_back.gif" style="background-repeat:no-repeat" > <TR> <TD height="36" align="right"> </TD> </TR> <TR> <TD height="32" style="font-size:12px"> 地点： <INPUT name="placeButton" type="button" class="picButton" value=" 选择/修改" onClick=" showMe()"></TD> </TR> <TR> <TD height="209"><P><IMG src="images/next.jpg" width="180" height="186"></P> <P> </P></TD> </TR> </TABLE> </FORM> <DIV id="placeLayer" style="background-repeat:no-repeat"> <TABLE width="476" height="109" border="0" cellspacing="0" style="font-size:12px"> <TR align="center"> <TD> </TD> <TD> </TD> <TD> </TD> <TD><A href="javascript: closeMe( )">关闭</A></TD> </TR> <TR align="center"> <TD><A href="javascript: selectPlace('北京')" >北京</A></TD> <TD><A href="javascript: selectPlace('上海')" >上海</A></TD> <TD><A href="javascript: selectPlace('广州')">广州</A></TD> <TD><A href="javascript: selectPlace('武汉')">武汉</A></TD> </TR> <TR align="center"> <TD><A href="javascript: selectPlace('成都')">成都</A></TD> <TD><A href="javascript: selectPlace('徐州')">徐州</A></TD> <TD><A href="javascript: selectPlace('深圳')">深圳</A></TD> <TD><A href="javascript: selectPlace('珠海')">珠海</A></TD> </TR> </TABLE> </DIV> </BODY> </HTML> 效果：本案例也可以修改后用在网页上单击鼠标的地方显示图片、显示菜单等。只要把图片、菜单放到层中即可。人法地，地法天，天法道，道法自然。

　　推荐阅读

　　javascript学习(二)javascript常见问题总结

1、JS中方法和变量都是区分大小写的 2、单引号、双引号在JS中没有特殊的区别，都可以用来创建字符串。但作为一般性规则，大多数开发人员喜欢用单引号而不是双引号，但是XHTML规范要求所有属性值都必须使用双引号括>>>详细阅读

本文标题：JavaScript 在网页上单击鼠标的地方显示层及关闭层

地址：http://www.17bianji.com/kaifa2/JS/22657.html

1/2 1