1<html>
  2
  3<head>
  4<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
  5<title>標(biāo)本資料</title>
  6<script language="javascript">
  7
  8var iDivHeight = 250; //放大顯示區(qū)域?qū)挾?/SPAN>
  9var iDivWidth = 250;//放大顯示區(qū)域高度
 10var iMultiple = 8;    //放大倍數(shù)
 11
 12//顯示放大圖，鼠標(biāo)移動事件和鼠標(biāo)點擊事件都會調(diào)用本事件
 13//參數(shù)：src代表縮略圖，sFileName放大圖片名稱
 14//原理：依據(jù)鼠標(biāo)對應(yīng)縮略圖左上角（0，0）上的位置控制放大圖左上角對應(yīng)顯示區(qū)域左上角（0，0）的位置
 15function show(src, sFileName)
 16{
 17    //判斷鼠標(biāo)事件產(chǎn)生時是否同時按下了
 18    if ((event.button == 1) && (event.ctrlKey == true))
 19        iMultiple -= 1;
 20    else
 21        if (event.button == 1)
 22            iMultiple += 1;
 23    if (iMultiple < 2) iMultiple = 2;
 24    
 25    if (iMultiple > 14) iMultiple = 14;
 26            
 27    var iPosX, iPosY;    //放大圖對應(yīng)顯示區(qū)域左上角的坐標(biāo)
 28    var iMouseX = event.offsetX;    //鼠標(biāo)對應(yīng)縮略圖左上角的橫坐標(biāo)
 29    var iMouseY = event.offsetY;    //鼠標(biāo)對應(yīng)縮略圖左上角的縱坐標(biāo)
 30    var iBigImgWidth = src.clientWidth * iMultiple;        //放大圖寬度，是縮略圖的寬度乘以放大倍數(shù)
 31    var iBigImgHeight = src.clientHeight * iMultiple;    //放大圖高度，是縮略圖的高度乘以放大倍數(shù)
 32    
 33    if (iBigImgWidth <= iDivWidth)
 34    {
 35        iPosX = (iDivWidth - iBigImgWidth) / 2;
 36    }
 37    else
 38    {
 39        if ((iMouseX * iMultiple) <= (iDivWidth / 2))
 40        {
 41            iPosX = 0;
 42        }
 43        else
 44        {
 45            if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))
 46            {
 47                iPosX = -(iBigImgWidth - iDivWidth);
 48            }
 49            else
 50            {
 51                iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
 52            }
 53        }
 54    }
 55    
 56    if (iBigImgHeight <= iDivHeight)
 57    {
 58        iPosY = (iDivHeight - iBigImgHeight) / 2;
 59    }
 60    else
 61    {
 62        if ((iMouseY * iMultiple) <= (iDivHeight / 2))
 63        {
 64            iPosY = 0;
 65        }
 66        else
 67        {
 68            if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))
 69            {
 70                iPosY = -(iBigImgHeight - iDivHeight);
 71            }
 72            else
 73            {
 74                iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
 75            }
 76        }
 77    }
 78    div1.style.height = iDivHeight;
 79    div1.style.width = iDivWidth;
 80    if (div1.innerHTML == "")
 81    {
 82        div1.innerHTML = "<img id=BigImg style='position:relative'>";
 83        BigImg.src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;
 84    }
 85    BigImg.width = iBigImgWidth;
 86    BigImg.height = iBigImgHeight;
 87    BigImg.style.top = iPosY;
 88    BigImg.style.left = iPosX;
 89}
 90
 91</script>
 92</head>
 93
 94<body>
 95
 96<p></p>
 97<table cellspacing="0" cellpadding="1" width="727" align="center" border="0">
 98    <tr>
 99        <td align="middle">
100        <table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
101            <tr>
102                <td align="middle">
103                <marquee scrolldelay="120" width="80%"><font size="2">將鼠標(biāo)移入標(biāo)本圖中，右方顯示局部放大圖；單擊鼠標(biāo)左鍵，可以增大放大倍數(shù)；鼠標(biāo)單擊時同時按Ctrl鍵則減小放大倍數(shù)。</font></marquee><br>
104                <img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="http://biomuseum.zsu.edu.cn/ASP/search/hexapod/small_pic/B-000002.jpg">
105                </td>
106            </tr>
107        </table>
108        </td>
109        <td style="WIDTH: 15px" width="15"></td>
110        <td align="middle">
111        <table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
112            <tr>
113                <td align="middle"><a href="01/B-000002.jpg" target="_blank">打開原圖</a>
114                <div id="div1" style="OVERFLOW: hidden">
115                </div>
116                </td>
117            </tr>
118        </table>
119        </td>
120    </tr>
121</table>
122<p></p>
123
124</body>
125
126</html>
127