JavaScript 在网页上单击鼠标的地方显示层及关闭层
2018-10-12 14:04
323 查看
在网页上单击鼠标的地方显示层,供用户选择地点,同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。
效果:
<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"> </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 在网页上单击鼠标的地方显示层
- 一个网页上随鼠标移动显示时钟的javascript 代码
- JavaScript基础 event 显示鼠标点击处的坐标值(For Firefox) 距离窗口的距离 距离网页的距离 距离屏幕的距离
- JavaScript基础 event 显示鼠标点击处的坐标值(For Firefox) 距离窗口的距离 距离网页的距离 距离屏幕的距离
- 【JavaScript】单击网页任意一处打开新窗口与关闭窗口
- JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
- jQuery实现鼠标单击网页文字后在文本框显示的方法
- JavaScript基础 event(For IE) 显示鼠标点击处的坐标值 距离窗口的距离 距离网页的距离 距离屏幕的距离
- JavaScript基础 event(For IE) 显示鼠标点击处的坐标值 距离窗口的距离 距离网页的距离 距离屏幕的距离
- jQuery实现鼠标单击网页文字后在文本框显示的方法
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-浮层的显示与关闭
- JavaScript基础 新网页打开两秒后 自动关闭,setTimeout("window.close()", 2000);
- 如何在网页上弹出一个对话框显示一些内容javascript
- Bootstrap 中下拉菜单修改成鼠标悬停直接显示[原创]_javascript技巧_脚本之家
- javascript实时获取鼠标坐标值并显示的方法
- Flash+JS打造鼠标移上去显示缩略图的焦点图_网页代码站(www.webdm.cn)
- javascript 获取时间显示到网页
- 物体碰撞说明(当鼠标放在某一地方,显示此物体的Tag)
- Swing添加鼠标右键菜单单击选择监听,并显示右键菜单