Js实现弹出层

<script type="text/javascript"> 
function $$(s)  
{ 
    return document.getElementsByName(s); 
} 
function $(s)  
{ 
    return document.getElementById(s); 
} 
function preview(v,n) 
{ 
var a = 'zp'+n; 
if(v == 1)  
{ 
$(a).style.display='block'; 
$(a).focus(); 
} 
else if(v == 0)  
{ 
$(a).style.display='none'; 
} 
} </script> <table border="1"> 
<tr> 
<td height="200px" width="400px"> <a href="#" onmousemove="t1=setTimeout('preview(1,1)',500)" onmouseout="t1=setTimeout('preview(0,1)',500)">职位名称 </a> </td> 
<div id="zp1" class="my_table" style="display:none;" onmousemove="t1=setTimeout('preview(1,1)',500)" onmouseout="t1=setTimeout('preview(0,1)',500)"> 
这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容这是隐藏一的内容 
<a href="#">这里是联结 </a> 
</div> 
</tr> 
</table> 

解决方案 »

  1.   

    Ext2的Tip就是这个功能。学学Ext吧
      

  2.   

    <img src=1.bmp onmouseover={div.style.visibility=''} onmouseout={div.style.visibility='hidden'}>
    <div id=div style="width:200;height:100;border:red 3 solid;visibility:hidden">
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JS实现感应鼠标显示半透明效果大图的图片放大效果丨芯晴网页特效丨CsrCode.Cn</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
     img {border:0;width:200px;height:200px;}
     #imgbox {position:absolute;border:3px solid #999;filter: Alpha(Opacity=85);visibility:hidden;}
    </style>
    <script language="javascript" type="text/javascript">
    /*触发事件*/
    function mouse_0(obj){
     var imgbox=document.getElementById("imgbox");
     imgbox.style.visibility='visible';
     var img = document.createElement("img");
     img.src=obj.src;
     img.style.width=obj.width * 2;
     img.style.height=obj.height * 2;
     imgbox.innerHTML='';
     imgbox.appendChild(img);
    }
    /*移动事件*/
    function mouse_1(obj,e){
     var browerHeight=document.documentElement.clientHeight; //浏览器高度
     var browerWidth=document.documentElement.clientWidth; //浏览器宽度
     var mouseY=e.clientY; //当前光标Y位置
     var mouseX=e.clientX; //当前光标X位置
     var scrollTop=document.documentElement.scrollTop; //垂直滚动条距离顶部
     var scrollLeft=document.documentElement.scrollLeft //水平滚动条距离左边
     if (mouseY+obj.height * 2 + 20 <= browerHeight) var height = true; //当前光标Y位置 + 对象高度 <= 浏览器高度 ，则height为真
     if (browerWidth-mouseX > mouseX) var width = true; //光标距离右边如果大于左边 ，则width为真
     if(height)
      y=scrollTop+mouseY+20;
     else
      y=scrollTop + browerHeight-obj.height * 2 - 20;
     if(width)
      x=scrollLeft+mouseX+20;
     else
      x=scrollLeft+mouseX-obj.width * 2 -20;
     document.getElementById("imgbox").style.left=x + "px";
     document.getElementById("imgbox").style.top=y + "px";
    }
    /*离开事件*/
    function mouse_2(){
     document.getElementById("imgbox").style.visibility='hidden';
    }
    </script>
    </head>
    <body>
    <!--把下面代码加到<body>与</body>之间-->
    <img src="/images/1.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
    <img src="/images/2.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
    <img src="/images/3.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
    <img src="/images/4.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
    <div id="imgbox" onmouseover="mouse_2(this)"></div>
    </body>
    </html>