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>
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 x = event.clientX;
9 y = 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>
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 x = event.clientX;
9 y = 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>
