当鼠标划过图片时，用浮动层来预览大图片，虽然不算完美，但够一个网站用即可，有需要再拿来改。
<!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
