当鼠标划过图片时，用浮动层来预览大图片，虽然不算完美，但够一个网站用即可，有需要再拿来改。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:style type="text/css"><!--
.center_div2{
position: absolute;
z-index: 1;
text-align: center;
background-color: #e0e7ef;
border:1px solid #F00;
}
.center_div_tips2
{
position: relative;
color: Red;
}
--></mce:style><style type="text/css" mce_bogus="1">.center_div2{
position: absolute;
z-index: 1;
text-align: center;
background-color: #e0e7ef;
border:1px solid #F00;
}
.center_div_tips2
{
position: relative;
color: Red;
}</style>
<mce:script language="javascript"><!--
function IsIE() {
var OsObject = "";
if (navigator.userAgent.indexOf("MSIE") > 0) {
return true;
}
}
function mouseMove(ev) {
/*ie 与ff的event 机制不同*/
ev = ev || window.event;
var mousePos = mouseCoords(ev);
var detailDiv = document.getElementById("detailDiv"); //将要弹出的层
detailDiv.style.left = (mousePos.x + 10) + "px";
detailDiv.style.top = (mousePos.y + 18) + "px";
}
function mouseCoords(ev) {
var result;
if (ev.pageX || ev.pageY) {
result = {
x: ev.pageX,
y: ev.pageY
};
}
/*ie 与 ff的边界 处理不同*/
else if (IsIE()) {
result = { x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop }
} else {
result = { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }
}
return result;
}
function preview_show(obj){
document.getElementById("detailDiv").style.display='';
document.onmousemove=mouseMove;
var detailImg=document.getElementById('detailImg');
detailImg.src=obj.parentNode.href;
}
function preview_hidden(){
document.onmousemove=null;
document.getElementById("detailDiv").style.display='none';
}
// --></mce:script>
</head>
<body>
<div id="detailDiv" class="center_div2">
<img id="detailImg" src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="200" />
</div>
<div id="textBox"></div>
<table width="65%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="150"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/about.jpg" mce_src="images/about.jpg" width="213" height="325" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td>
<td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td>
</tr>
<tr>
<td height="100"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/adv-06.jpg" mce_src="images/adv-06.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td>
<td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td>
</tr>
</table>
</body>
</html>
#============
参考自：http://www.jb51.net/article/21485.htm