js鼠标悬停效果

 

代码
 <script type="text/javascript">
        function showPic(sUrl){ 
            var leftedge    
= document.body.clientWidth-event.clientX;
            var bottomedge  
= document.body.clientHeight-event.clientY;
           
if (leftedge < document.getElementById("Layer1").offsetWidth)
            {
                document.getElementById(
"Layer1").style.left = document.body.scrollLeft + event.clientX - document.getElementById("Layer1").offsetWidth;
            }
            
else
            {
               
/*否则,就定位DIV的左坐标为当前鼠标位置*/
                document.getElementById(
"Layer1").style.left = document.body.scrollLeft + event.clientX-350;
            }
            
/*如果从鼠标位置到窗口下边的空间小于DIV的高度,就定位DIV的上坐标(Top)为当前鼠标位置向上一个DIV高度*/
            
if (bottomedge < document.getElementById("Layer1").offsetHeight)
            {
                document.getElementById(
"Layer1").style.top = document.body.scrollTop + event.clientY - document.getElementById("Layer1").offsetHeight;
            }
            
else
            {
                
/*否则,就定位DIV的上坐标为当前鼠标位置*/
                document.getElementById(
"Layer1").style.top = document.body.scrollTop + event.clientY;
            }
                document.getElementById(
"Layer1").innerHTML = "<div style=\"width:280px; padding:5px; background-color:#e7fbfc; border:6px solid #31bdd4; font-weight:bold;\"><div style=\"color:#191f77; line-height:18px; padding-left:20px; width:260px\">"+sUrl+"</div></div>"
                document.getElementById(
"Layer1").style.display = "block"
        } 
       function hiddenPic(){ 
            document.getElementById(
"Layer1").innerHTML = ""
            document.getElementById(
"Layer1").style.display = "none";
           }
          
     
    
</script>


<div onmouseout="hiddenPic();" onmousemove="showPic('显示的文字');"></div>

--显示的div
 
<div id="Layer1" style="display: none; position: absolute; z-index: 1; width: 350px">
                                    
</div>

 

 以上是我用了下面代码后的不完善补充的地方  

--------------------------------------------

 

代码
 1 <html> 
 2 <head> 
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 4 <title>JS教程:鼠标悬停文字上显示图片</title> 
 5 <script language="javascript"> 
 6 function showPic(sUrl){ 
 7 var x,y; 
 8 = event.clientX; 
 9 = event.clientY; 
10 document.getElementById("Layer1").style.left = x; 
11 document.getElementById("Layer1").style.top = y; 
12 document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"
13 document.getElementById("Layer1").style.display = "block"
14 
15 function hiddenPic(){ 
16 document.getElementById("Layer1").innerHTML = ""
17 document.getElementById("Layer1").style.display = "none"
18 
19 </script> 
20 </head> 
21 <body> 
22 <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div> 
23 <img src="/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /> 
24 <p></p> 
25 </body> 
26 </html>

 

 

posted @ 2010-03-08 17:37  不必太用力  阅读(1046)  评论(0编辑  收藏  举报