js-鼠标经过或点击在鼠标当前位置弹出DIV层

最近参考网上一些免费资源，做了一个js特效。效果如题：

首先设置你要弹出的DIV层样式：

 

代码

1 < style type ="text/css" >
2 #blockCity { position : absolute ; font-size : 9pt ; background-color : #FFFFCC ; padding : 5px ; border : 1px solid #F5C66B ; line-height : 160% ; width : 300px ; display : none ; }
3 #blockCity a
4 {
5 color : #000000 ;
6 font-size : 9pt ;
7 text-decoration : none ;
8 }
9 #blockCity a:hover
10 {
11 font-size : 10pt ;
12 border-bottom : dashed 1px #000000 ;
13 }
14 #blockCity table
15 {
16 border : 1px dotted #F5C66B ;
17 }
18 #blockCity table td
19 {
20 width : 40px ;
21 text-algin : center ;
22 }
23 </ style >

 

然后：js代码

 

代码

1 < script type = " text/javascript " >
2 function selStation(locationid){
3 var Obj = document.getElementById( " blockCity " );
4 document.getElementById( " blockCity " ).innerHTML = "" ;
5 for ( var i = 0 ;i < onecount; i ++ ){
6 if (subcat[i][ 1 ] == locationid)
7 {
8 document.getElementById( " blockCity " ).innerHTML += subcat[i][ 0 ] + " <br /> " ;
9 document.getElementById( " blockCity " ).style.left = event.x;
10 document.getElementById( " blockCity " ).style.top = event.y + document.documentElement.scrollTop - 40 ;
11 document.getElementById( " blockCity " ).style.display = " block " ;
12 }
13 }
14
15 }
16
17 function cshow(){
18 document.getElementById( " blockCity " ).style.display = " block " ;
19 }
20 function chide(){
21 document.getElementById( " blockCity " ).style.display = " none " ;
22 }
23 < / script>

 

 

< script type = text / javascript>
var onecount;
onecount = 0 ;
subcat = new Array();
subcat[ 0 ] = new Array( ' 你要显示的内容 ' , ' 类似ID，通过这个变量来进行查找 ' );
onecount = 1 ;
< / script>

 

最后就是前台调用了：

 

1 < a href ="#" onmouseover ="selStation('类似ID,与上面js对应');" onmouseout ="chide();" > 查看我隐藏的DIV </ a >

 

 

 

 

 

转载于:https://www.cnblogs.com/mrguo/archive/2010/03/16/1687182.html