js放大镜效果鼠标放到一张图片上立刻显示出来这个图片的放大图是不是很炫！下面的代码就可以实现。
<!— THE SITE IS DESIGNED BY MYHYLI —><html><head><title>Untitled Document</title><meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″><script language=”JavaScript”><!–var zoomvalue=3;var magnifierw0=100;var magnifierh0=50;function init() {document.body.innerHTML+=’<div id=”magnifier”style=”background-image:url(images/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid#FF0000;visibility:hidden;text-align:right;font-size:10px;font-family :Verdana;color:#FF0000;cursor:default;overflow:hidden”onclick=”showhide()” onselectstart=”return false;”>300%</div><div id=”zoom” style=”background-color:red;position:absolute;width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden”><iframe name=”zoomiframe”src=”about:blank” frameborder=”0″ scrolling=”no” width=”100%” height=”100%”></iframe></div>’;}function setposition() {zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;zoom.style.top=document.body.scrollTop+5;}function showhide() {if (magnifier.style.visibility==’hidden’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;magnifier.style.visibility=’visible’;zoom.style.visibility=’visible’;zoomiframe.location.href=self.location;setposition();magnifier.setCapture();}else {if (event.shiftKey) {if (zoomvalue<1) {zoomvalue+=0.1;}else {zoomvalue=zoomvalue+1>8?8:zoomvalue+1;}magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else if (event.ctrlKey) {if (zoomvalue-1>0) zoomvalue-=1;else {if (parseInt(zoomvalue*10)/10>0.5) zoomvalue-=0.1;} magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else {magnifier.style.visibility=’hidden’;zoom.style.visibility=’hidden’;zoom.style.left=0;magnifier.releaseCapture();}}follow();}function follow() {if (magnifier.style.visibility==’visible’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.o ffsetHeight/2;zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop); zoomiframe.document.body.style.zoom=zoomvalue;zoomiframe.document.body.style.border=”;}}document.onmousemove=follow;document.onselectstart=new Function(‘return false;’);document.ondblclick=showhide;window.onresize=setposition;window.onload=init;// –></script><link rel=”stylesheet” href=”images/test.css” type=”text/css”> </head><body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”0″ topmargin=”0″><table width=500 border=0 cellspacing=0 cellpadding=0><tr><td><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p></td></tr></table> </body> </html>。