<script language="JavaScript"><!--var smallX = 150; //缩略图宽度var bigX = 600; //预览窗大小,可以任意设置var bigY = 450;var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小var srcY = -1;var border = 5; //边框var smallY,viewX,viewY,bl,isIE,vX,vY;window.οnlοad=function (){ //初始化数据head.innerHTML="图片已载入";isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小else{bigpic.width=srcX;bigpic.height=srcY;}smallY=srcY*smallX/srcX; //按比例计算出缩略图的高viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小viewY=bigY/srcY*smallY;bl=srcX/smallX; //得到缩放比例smallpic.width=smallX; //初始化实例属性smallpic.height=smallY;smallbox.style.borderWidth=border;smallbox.style.width=smallpic.offsetWidth+border*2*isIE; //(+border*2*isIE),如果是IE就加上2倍边框以修正模型差异,FF无变化smallbox.style.height=smallpic.offsetHeight+border*2*isIE; //以下的isIE同理,修正ie盒模型bugbigbox.style.borderWidth=border;bigbox.style.width=bigX+border*2*isIE;bigbox.style.height=bigY+border*2*isIE;view.style.left=smallbox.offsetLeft + border;view.style.top=smallbox.offsetTop + border;view.style.width=viewX- !isIE*3+1;view.style.height=viewY- !isIE*3+1;}function move(e){var e = window.event?window.event:e; //得到IE或FF的eventif (!isIE){vX=e.pageX-border-smallbox.offsetLeft; //分别在FF与IE下获得相对坐标vY=e.pageY-border-smallbox.offsetTop}else{vX=e.offsetX;vY=e.offsetY}vX+=-viewX/2; //得到缩略图的预览窗位置vY+=-viewY/2;if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围if (vY < 0) vY = 0;if (vX > smallX - viewX) vX = smallX - viewX;if (vY > smallY - viewY) vY = smallY - viewY;bigpico.style.marginLeft = - vX * bl; //刷新预览窗口bigpico.style.marginTop = - vY * bl;view.style.left = vX + smallbox.offsetLeft + border; //刷新缩略图中预览窗口view.style.top = vY + smallbox.offsetTop + border;}//--></script><style type="text/css"><!--*{padding:0;margin:0}body{background:black}img{display:block;}#smallbox{border:1px green solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}#bigbox{border:1px green solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}#view{border:1px silver solid;width:0px;height:0px;position:absolute;font-size:0px}#head{text-align:center;line-height:40px;font:bold 16px/40px;color:lime}//--></style><div id="head">图片loading...</div><div id="smallbox"><!--缩略图窗口//--><img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49455.jpg" border="0" οnmοusemοve="move(event)"></div><div id="bigbox"><!--预览窗口//--><div id="bigpico"><!--大图片容器//--><img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49457.jpg" border="0"></div></div><div id="view" οnmοusemοve="if (!isIE) move(event)"></div><!--缩略图上的预览窗//-->
