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


Posted in Javascript onDecember 30, 2012

在网页上单击鼠标的地方显示层,供用户选择地点,同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。

<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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
javascript中的缓动效果实现程序
Dec 29 #Javascript
通过正则格式化url查询字符串实现代码
Dec 28 #Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 #Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 #Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 #Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
You might like
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
javascript基本语法
2016/05/31 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
vue之nextTick全面解析
2017/05/17 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
出纳员岗位职责风险
2014/03/06 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
银行贷款承诺书
2014/03/29 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
唐山大地震观后感
2015/06/05 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL