需求背景：購物網站中的商品區域性放大：

程式碼：

html:

 <div class="Pro_Detleft">
         <div class="detail-itemsummary-imageviewer">
                    <div id="middlePicRemark" class="middlePicRemark">  <img id="imgGoodsPic" alt="" src="images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div>


                    <div id="middlePicBox" class="middlePicBox">
                    <span id="BigViewImage" class="jqzoom" style="outline-style: none; cursor: crosshair; display: block; position: relative; height: 396px; width: 396px;"><img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="images/20141009154623153.jpg">
                  <div class='jqZoomPup' style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'>
  </div></span>
                        </div>

css:

.middlePicRemark {
position: absolute;
top: 0;
left: 0;
width: 244px;
z-index: 1;
line-height: 18px;
text-align: center;
padding: 3px;
background-color: #f3f3f3;
border: 1px #999 solid;
display: none;
}
.middlePicBox {
clear: both;
PADDING-BOTTOM: 0;
HEIGHT: 396px;
TEXT-ALIGN: center;
border: 1px solid #E3E3E3;
position: relative;
}
.middlePicBox i.F_goods_xg {
display: block;


width: 77px;
height: 77px;
position: absolute;
top: 28px;
left: 28px;
z-index: 5;
}
.middlePicBox {
clear: both;
PADDING-BOTTOM: 0;
HEIGHT: 396px;
TEXT-ALIGN: center;
border: 1px solid #E3E3E3;
position: relative;
}
.jqZoomPup {
overflow: hidden;
background-color: #FFF;
-moz-opacity: 0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index: 10;
border-color: #e3e3e3;
border-style: solid;
cursor: crosshair;
}

js:

 //滑鼠在大圖上移動時區域性放大
    /*
    * 演算法思路是用兩個圖片，一個為滑鼠在其上移動的小圖，另一個為大圖，動態獲取滑鼠的位置，在小圖上的偏移量成比例的移動大圖，使其部分顯示在div中達到放大效果
    *
    * */
    $("#BigViewImage").mousemove(function(e){
        var divObj=document.getElementById("middlePicBox");//獲取外層span在整個頁面的偏移量
        var curX= e.pageX-GetObjPos(divObj)['x'];           //獲取滑鼠相對於大圖片左上角的偏移量
        var curY= e.pageY-GetObjPos(divObj)['y'];
        if(curX<107.12)curX=107.12;                          //如果小圖片左上角到達大圖片左上角，則停止移動
        if(curX>288.88)curX=288.88;
        if(curY<83.16)curY=83.16;
        if(curY>312.84)curY=312.84;
        var percentX=(curX-107.12)/396;
        var percentY=(curY-83.16)/396;   //當前小矩形框的左上角偏移量相對於圖片的橫向比例
        var BigViewOffsetX=percentX*950;      //計算出右邊放大圖應該放大的偏移量
        var BigViewOffsetY=percentY*950;
        $("#middlePicRemark").css('display','block');
        $('.jqZoomPup').css('left',curX-107.12+'px');
        $('.jqZoomPup').css('top',curY-83.16+'px');
        $(".jqZoomPup").css('visibility','visible');
        $("#imgGoodsPic").css('left',0-BigViewOffsetX+'px');
        $("#imgGoodsPic").css('top',0-BigViewOffsetY+'px');
    }).mouseout(function(){
        $(".jqZoomPup").css('visibility','hidden');
        $("#middlePicRemark").css('display','none');
    });