JS函数实现鼠标指向后带图片的提示效果

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

当鼠标移到产品缩略图上时能弹出显示大图,用JS写两个函数即可实现:

一个函数在鼠标移到图片上调用,显示隐藏层并将图片载入到层中;

另一个函数在鼠标移出图片上调用,清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。

以下是引用片段:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS函数实现鼠标指向后带图片的提示效果</title>

<script language="javascript">

function showPic(sUrl){

var x,y;

x = event.clientX;

y = event.clientY;

document.getElementById("Layer1").style.left = x;

document.getElementById("Layer1").style.top = y;

document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">";

document.getElementById("Layer1").style.display = "block";

}

function hiddenPic(){

document.getElementById("Layer1").innerHTML = "";

document.getElementById("Layer1").style.display = "none";

}

</script>

</head>

<body>

<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>

<img src="/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />

<p></p>

<img src="/img/200406301.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航