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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery对表单操作2
Apr 06 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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获取文件名后缀常用方法小结
2015/02/24 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python实现批量修改文件名代码
2017/09/10 Python
Python3 修改默认环境的方法
2019/02/16 Python
基于python实现计算两组数据P值
2020/07/10 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
类的核心特性有哪些
2014/01/01 面试题
人力资源专员岗位职责
2014/01/30 职场文书
五水共治一句话承诺
2014/05/30 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
新郎新娘致辞
2015/07/31 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python