现仅已.NET为例，HTML代码如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <HTML> 3 <HEAD> 4 <title>test</title> 5 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> 6 <meta name="CODE_LANGUAGE" Content="C#"> 7 <meta name="vs_defaultClientScript" content="JavaScript"> 8 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> 9 <script language="JavaScript"> 10 <!-- 11 var smallX = 200; //缩略图宽度 12 var bigX = 600; //预览窗大小,可以任意设置 13 var bigY = 450; 14 var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小 15 var srcY = -1; 16 var border = 5; //边框 17 var smallY,viewX,viewY,bl,isIE,vX,vY; 18 window.onload=function (){ 19 head.innerHTML="图片已载入"; 20 isIE=window.event?1:0; 21 if (srcX==-1 && srcY==-1){srcX=document.getElementByIdx('bigpic').width;srcY=document.getElementByIdx('bigpic').height;} 22 else{document.getElementByIdx('bigpic').width=srcX;document.getElementByIdx('bigpic').height=srcY;} 23 smallY=srcY*smallX/srcX; 24 viewX=bigX/srcX*smallX; //预览范围 25 viewY=bigY/srcY*smallY; 26 bl=srcX/smallX; //缩小比例 27 document.getElementByIdx('smallpic').width=smallX; 28 document.getElementByIdx('smallpic').height=smallY; 29 smallbox.style.borderWidth=border; 30 smallbox.style.width=document.getElementByIdx('smallpic').offsetWidth+border*2*isIE; 31 smallbox.style.height=document.getElementByIdx('smallpic').offsetHeight+border*2*isIE; 32 bigbox.style.borderWidth=border; 33 bigbox.style.width=bigX+border*2*isIE; 34 bigbox.style.height=bigY+border*2*isIE; 35 view.style.left=smallbox.offsetLeft + border; 36 view.style.top=smallbox.offsetTop + border; 37 view.style.width=viewX- !isIE*3+1; 38 view.style.height=viewY- !isIE*3+1; 39 } 40 function move(e){ 41 var e = window.event?window.event:e; 42 if (!isIE){vX=e.pageX-border-smallbox.offsetLeft; 43 vY=e.pageY-border-smallbox.offsetTop} 44 else{vX=e.offsetX;vY=e.offsetY} 45 vX+=-viewX/2; 46 vY+=-viewY/2; 47 if (vX < 0) vX = 0; 48 if (vY < 0) vY = 0; 49 if (vX > smallX - viewX) vX = smallX - viewX; 50 if (vY > smallY - viewY) vY = smallY - viewY; 51 bigpico.style.marginLeft = - vX * bl; 52 bigpico.style.marginTop = - vY * bl; 53 view.style.left = vX + smallbox.offsetLeft + border; 54 view.style.top = vY + smallbox.offsetTop + border; 55 } 56 //--> 57 </script> 58 <style type="text/css"> 59 <!-- 60 *{padding:0;margin:0} 61 body{background:black} 62 img{display:block;} 63 #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px} 64 #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px} 65 #view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px} 66 #head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink} 67 //--> 68 </style> 69 </HEAD> 70 <body MS_POSITIONING="GridLayout"> 71 <form id="Form1" method="post" runat="server"> 72 <div id="head">图片loading...</div> 73 <div id="smallbox"><img id="smallpic" src="Upimages/ShopImages/<%=simage%>" border="0" onmousemove="move(event)"></div> 74 <div id="bigbox"><div id="bigpico"><img id="bigpic" src="Upimages/ShopImages/<%=zimage%>" border="0"></div></div> 75 <div id="view" onmousemove="if (!isIE) move(event)"></div> 76 </form> 77 </body> 78 </HTML>
其中的<%=simage%>,<%=zimage%>都是程序调用的。预览效果如下：
