脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 单击鼠标显示层

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

 更新时间：2012年12月30日 11:10:16   作者：  
在网页上单击鼠标的地方显示层，供用户选择地点，同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏,感兴趣的朋友可以参考下
在网页上单击鼠标的地方显示层，供用户选择地点，同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。
复制代码 代码如下:

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的隐藏显示练习</TITLE>
<STYLE type="text/css">
<!--
/*设置图片按钮样式*/
.picButton { background-image: url(images/buttonBack.gif);
border:0 px;
margin: 0px;
padding: 0px;
height: 22px;
width: 123px;
font-size: 12px;
}
/*设置无下划线的超连接样式*/
A {
color: blue;
text-decoration: none;
}
A:hover{ /*鼠标在超链接上悬停时变为颜色*/
color: red;
}
#placeLayer {
position:absolute;
/*left:200px;
top:81px;*/
width:483px;
height:194px;
z-index:2;
background-color: #FFFFFF;
background-image: url(images/layerBack.jpg);
display:none
}
-->
</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">&nbsp;</TD>
</TR>
<TR>
<TD height="32" style="font-size:12px">&nbsp;地点：
<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>&nbsp;</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>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</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>

效果：

 
本案例也可以修改后用在网页上单击鼠标的地方显示图片、显示菜单等。只要把图片、菜单放到层中即可。
人法地，地法天，天法道，道法自然。

您可能感兴趣的文章:

相关文章

  • JS字符串和数组如何实现相互转化

    JS字符串和数组如何实现相互转化

    这篇文章主要介绍了JS字符串和数组如何实现相互转化,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript架构前端监控搭建过程步骤

    JavaScript架构前端监控搭建过程步骤

    这篇文章主要为大家介绍了JavaScript架构前端监控搭建过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • JavaScript实现动态网页时钟

    JavaScript实现动态网页时钟

    这篇文章主要介绍了JavaScript实现动态网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 普通web整合quartz跑定时任务的示例

    普通web整合quartz跑定时任务的示例

    这篇文章主要介绍了普通web整合quartz跑定时任务,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript 数组的深度复制解析

    JavaScript 数组的深度复制解析

    一般情况下，使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据，这个符号就不好使了。这篇文章主要介绍了JavaScript 数组的深度复制解析的相关资料,需要的朋友可以参考下
    2016-11-11
  • js实现字符串和数组之间相互转换操作

    js实现字符串和数组之间相互转换操作

    这篇文章主要介绍了js实现字符串和数组之间相互转换操作的相关资料，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 获取JavaScript用户自定义类的类名称的代码

    获取JavaScript用户自定义类的类名称的代码

    获取JavaScript用户自定义类的类名称的代码...
    2007-03-03
  • javascript之IE版本检测超简单方法

    javascript之IE版本检测超简单方法

    下面小编就为大家带来一篇javascript之IE版本检测超简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript 正则替换 replace(regExp, function)用法

    javascript 正则替换 replace(regExp, function)用法

    刚在弄网页通过servlet返回的json数据来添加div元素,简单研究了下replace(regExp, function)方式的function参数.
    2010-05-05

最新评论