直接上代碼吧（一共也才100來行，小東西）
代碼如下:
$(document).ready(function() {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
$("#oriImage").bind('mouseleave', function(event) {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px";
});
$("#oriImage").bind('mouseover', function(event) {
$("#oriImage").bind('mousemove', function(event) { // 在鼠標移動至操作層以後才LazyBind鼠標移動事件
var mouseX, mouseY;
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //在IE6以上各版本下和GOOGLE浏覽器下
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
} else {//在FF浏覽器下需要追加像素作為偏移量單位而不能是其他
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
}
var playOffsetX = 0 - mouseX / _xPercent(_el("oriImage").style.width, _el("biggerPic").style.width);
var playOffsetY = 0 - mouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height);
//當大圖X坐標大於0，也就是到達最左邊距時重置為0,當圖片的X偏移量已經超出顯示的容器時，則重置為其X偏移量為圖片與容器之差的負數
if (playOffsetY < 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) {
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
return;
}
//當大圖Y坐標大於0，也就是到達最上邊距時重置為0，當圖片的Y偏移量已經超出顯示的容器時，則重置為其Y偏移量為圖片與容器之差的負數
if (playOffsetX < 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2
&& playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) {
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX >= 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) {
//alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2);
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" :
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px";
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" :
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px";
return;
}
return;
});
});
});
嗯上面就基本上是大體的邏輯了，這裡稍微解釋一下，
1 大家應該注意到了，還是有很多CSS HACK的地方，現在這個東西是兼容FF3.0，IE 6，
7 ，8 以及chrome的，其他的還沒有來得及試驗
2 開發當中當放大以後的圖片也就是ID為biggerPic的圖片在移動到邊界的時候要做特殊
處理，左邊和上邊就很簡單了，直接歸零，但右邊和下邊就稍微麻煩一點，需要計算當前
圖片相對於容器（也就是ID為container的DIV）的偏移量，這裡有一個問題，如果想以一
個固定的值去重新覆蓋掉圖片距離容器的上邊距或右邊距的時候，當用戶浏覽會發現有類
似“跳幀”的現象，原因是因為我用來判斷當前圖片的偏移量時用到了鼠標相對於操作容
器（也就是ID為“oriImage”的DIV）的距離作為判斷的條件，事後發現這種做法不夠精
確，而且會造成“跳幀”，遂放棄了這種方案。現在采用的是分別判斷鼠標位置的方法，
從而觸發不同的邏輯，代碼上寫的很清楚了。
3 之所以在頁面加載完畢以及鼠標離開操作層的時候將大圖的位置設置為最右下方，是
因為為了避免第二點中提到的“跳幀”而用的分條件判斷，在第一時間用戶觸發鼠標移動
事件的時候，如果由操作層的右側或是下側進入的話，就會有不正確的顯示，這估計也是
很多網上直接把放大鏡層在加載的時候設置為hidden的原因，我覺得這仍是一個BUG，希
望有大蝦指點正確的做法。
4 HTML的寫法如下：
下面是操作層以及其中放的小圖的寫法，CSS沒有抽出來，最近很懶
<div id="oriImage" style="cursor:crosshair; background-color: Yellow; overflow:hidden; width: 150px; height: 150px;">
<img id="oriImg" src="3.jpg" style="width:150px;height:150px;" alt="鼠標劃過查看細節" /><!--這個圖片ID可以任意指定--></div>
下面是效果層以及其中放的大圖的寫法，CSS沒有抽出來，真的很懶
<div id="container" style="position: absolute; top: 200px; left: 450px; width: 250px;height: 250px; z-index: 10; overflow:hidden;">
<img id="biggerPic" src="1.jpg" style="width:1500px;height:1500px;" alt="查看產品細節" /></div>
PS: 各個HTML元素的ID除了操作層中的圖片也就是“oriImg”之外，修改的話要修改JS.
放大鏡層的樣式必須添加一個為“overflow:hidden;”這個本應該做到JS裡面去，懶了一下.
好了東西講完了，現在補充一下，本人剛涉足前端，很多不足，大家多多包涵，
東西雖然拙劣，但好歹是自己敲的，日後有用到的同學可以直接問我要.