说明：
鼠标右边的图像上，鼠标左键单击放大，ctrl+鼠标左键缩小

<script language="javascript">
var iDivHeight = 300; //放大显示区域宽度
var iDivWidth = 600;//放大显示区域高度
var iMultiple = 8; //放大倍数

//显示放大图，鼠标移动事件和鼠标点击事件都会调用本事件
//参数：src代表缩略图，sFileName放大图片名称
//原理：依据鼠标对应缩略图左上角（0，0）上的位置控制放大图左上角对应显示区域左上角（0，0）的位置
function show(src, sFileName)
{
 //判断鼠标事件产生时是否同时按下了
 if ((event.button == 1) && (event.ctrlKey == true))
  iMultiple -= 1;
 else
  if (event.button == 1)
   iMultiple += 1;
 if (iMultiple < 2) iMultiple = 2;
 
 if (iMultiple > 14) iMultiple = 14;
   
 var iPosX, iPosY; //放大图对应显示区域左上角的坐标
 var iMouseX = event.offsetX; //鼠标对应缩略图左上角的横坐标
 var iMouseY = event.offsetY; //鼠标对应缩略图左上角的纵坐标
 var iBigImgWidth = src.clientWidth * iMultiple;  //放大图宽度，是缩略图的宽度乘以放大倍数
 var iBigImgHeight = src.clientHeight * iMultiple; //放大图高度，是缩略图的高度乘以放大倍数
 
 if (iBigImgWidth <= iDivWidth)
 {
  iPosX = (iDivWidth - iBigImgWidth) / 2;
 }
 else
 {
  if ((iMouseX * iMultiple) <= (iDivWidth / 2))
  {
   iPosX = 0;
  }
  else
  {
   if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))
   {
    iPosX = -(iBigImgWidth - iDivWidth);
   }
   else
   {
    iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
   }
  }
 }
 
 if (iBigImgHeight <= iDivHeight)
 {
  iPosY = (iDivHeight - iBigImgHeight) / 2;
 }
 else
 {
  if ((iMouseY * iMultiple) <= (iDivHeight / 2))
  {
   iPosY = 0;
  }
  else
  {
   if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))
   {
    iPosY = -(iBigImgHeight - iDivHeight);
   }
   else
   {
    iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
   }
  }
 }
 div1.style.height = iDivHeight;
 div1.style.width = iDivWidth;
 if (div1.innerHTML == "")
 {
  div1.innerHTML = "<img id=BigImg style='position:relative'>";
  BigImg.src = "" + sFileName;
 }
 BigImg.width = iBigImgWidth;
 BigImg.height = iBigImgHeight;
 BigImg.style.top = iPosY;
 BigImg.style.left = iPosX;
}

</script>
<style type="text/css">
<!--
.style1 {font-size: 12px}
.style2 {font-size: 9px}
.style3 {font-size: xx-small}
-->
</style>

<div id="Layer1" style="position:absolute; left:5px; top:63px; width:600px; height:300px; z-index:1">  
  <table height="400" cellspacing="0" cellpadding="0" width="600" border="1">
   <tr>
    <td width="388" align="middle"><a href="http://bbs.51js.com/images/default/logo.gif" target="_blank">打开原图</a>
    <div id="div1" style="OVERFLOW: hidden">
    </div>
    </td>
   </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:611px; top:161px; width:301px; height:197px; z-index:2">  
  <table height="301" cellspacing="0" cellpadding="0" width="302" border="1">
   <tr>
    <td align="middle">

    <br>
    <img onmousemove="show(this, 'http://bbs.51js.com/images/default/logo.gif')" onmousedown="show(this, 'http://bbs.51js.com/images/default/logo.gif')" id="imgSource" src="http://bbs.51js.com/images/default/logo.gif">
    </td>
   </tr>
  </table>
</div>
<div id="Layer3" style="position:absolute; left:3px; top:2px; width:800px; height:53px; z-index:3; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">    
  <marquee behavior="alternate" height="100" direction="up" scrollamount="8" scrolldelay="10" width="800" >
  <span class="style1"> <span class="style2"> <span class="style3">
  <marquee behavior="alternate" height="10" direction="left" scrollamount="8" scrolldelay="10" width="100%">
  <font style="font-size: 20px" color="#FFFFFF">将鼠标移入图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font>
  </marquee>
  </span> </span> </span>
  </marquee>
</div>