<script language="JavaScript"> 
  <!-- 
 var smallX = 150; //缩略图宽度 
 var bigX = 800; //预览窗大小,可以任意设置 
 var bigY = 568; 
 var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小 
 var srcY = -1; 
 var border = 1; //边框 
 var smallY,viewX,viewY,bl,isIE,vX,vY,imgo; 
 window.onload=function (){  //初始化数据 
  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; //得到缩放比例 
  bigbox.style.borderWidth=border; //初始化预览窗 
  bigbox.style.width=bigX+border*2*isIE; 
  bigbox.style.height=bigY+border*2*isIE; 
  view.style.borderWidth=border; //初始化小预览窗 
  view.style.width=viewX-!isIE*border*2; 
  view.style.height=viewY-!isIE*border*2; 
  loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2; //初始化loading 
  loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2; 
  var imga=document.body.getElementsByTagName("img") //初始化所有缩略图 
  for (m=0;m <imga.length;m++) 
 if (imga[m].className=="smallpic"){ 
  imga[m].style.borderWidth=border; 
  imga[m].width=smallX; 
  imga[m].height=smallY; 
  imga[m].onmouseout=function(){if (isIE) view.style.display='none'} 
 } 
 } 
 function move(e,o){ 
  if (imgo!=o){ //如果切换图片 
  bigpic.style.display = 'none'; 
  bigpic.src=o.lowsrc; //载入新图片 
  imgo=o; //imgo作为标记,避免重复载入相同图片 
  }else{ 
 var e = window.event?window.event:e; //得到IE或FF的event 
 if (!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop} 
 else{vX=e.offsetX;vY=e.offsetY} //分别在FF与IE下获得相对坐标 
 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; 
 bigpic.style.marginLeft = - vX * bl; //刷新预览窗口 
 bigpic.style.marginTop = - vY * bl; 
 view.style.display = 'block'; //刷新缩略图中预览窗口 
 view.style.left = vX + o.offsetLeft + border; 
 view.style.top = vY + o.offsetTop + border; 
  } 
 } 
 //--> 
  </script> 
  <style type="text/css"> 
  <!-- 
 *{padding:0;margin:0} 
 body{background:black} 
 .smallpic{display:block;border:green dotted;float:left} 
 #bigbox{border:green solid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;} 
 #view{border:silver solid;width:0;height:0;font-size:0px;display:none;position:absolute;} 
 #loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;} 
 #loading img{vertical-align:middle} 
 //--> 
  </style> 
  <div id="bigbox"> <img id="bigpic" src="http://www.whoj.net/images//b1.jpg" border="0" onload="this.style.display = 'block'"> <div id="loading"> <img src="http://www.whoj.net/images/loading.gif" border="0"> Loading... </div> </div> <!--预览窗//--> 
  <div id="view" onmousemove="if (!isIE) move(event,imgo)" onmouseout="if (!isIE) view.style.display='none'"> </div> <!--小预览窗//--&