基于jquery的商品展示放大鏡

更新時間：2010年08月07日 16:21:51 作者：

這兩天幫朋友的網(wǎng)站做個放大鏡，就是淘寶上的那種，兩個框，一個框放小圖，另外一個框放大圖。本來說想從網(wǎng)上直接載一個拿來Hack，但是找好半天都沒有找到，看了看JQ的插件也好像不對，干脆就自己寫了。

直接上代碼吧（一共也才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偏移量已經(jīng)超出顯示的容器時，則重置為其X偏移量為圖片與容器之差的負數(shù) 
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偏移量已經(jīng)超出顯示的容器時，則重置為其Y偏移量為圖片與容器之差的負數(shù) 
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的地方，現(xiàn)在這個東西是兼容FF3.0，IE 6，
7 ，8 以及chrome的，其他的還沒有來得及試驗

2 開發(fā)當中當放大以后的圖片也就是ID為biggerPic的圖片在移動到邊界的時候要做特殊
處理，左邊和上邊就很簡單了，直接歸零，但右邊和下邊就稍微麻煩一點，需要計算當前
圖片相對于容器（也就是ID為container的DIV）的偏移量，這里有一個問題，如果想以一
個固定的值去重新覆蓋掉圖片距離容器的上邊距或右邊距的時候，當用戶瀏覽會發(fā)現(xiàn)有類
似“跳幀”的現(xiàn)象，原因是因為我用來判斷當前圖片的偏移量時用到了鼠標相對于操作容
器（也就是ID為“oriImage”的DIV）的距離作為判斷的條件，事后發(fā)現(xiàn)這種做法不夠精
確，而且會造成“跳幀”，遂放棄了這種方案?，F(xiàn)在采用的是分別判斷鼠標位置的方法，
從而觸發(fā)不同的邏輯，代碼上寫的很清楚了。

3 之所以在頁面加載完畢以及鼠標離開操作層的時候?qū)⒋髨D的位置設置為最右下方，是
因為為了避免第二點中提到的“跳幀”而用的分條件判斷，在第一時間用戶觸發(fā)鼠標移動
事件的時候，如果由操作層的右側(cè)或是下側(cè)進入的話，就會有不正確的顯示，這估計也是
很多網(wǎng)上直接把放大鏡層在加載的時候設置為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="鼠標劃過查看細節(jié)" /></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="查看產(chǎn)品細節(jié)" /></div>

PS: 各個HTML元素的ID除了操作層中的圖片也就是“oriImg”之外，修改的話要修改JS.
放大鏡層的樣式必須添加一個為“overflow:hidden;”這個本應該做到JS里面去，懶了一下.
好了東西講完了，現(xiàn)在補充一下，本人剛涉足前端，很多不足，大家多多包涵，
東西雖然拙劣，但好歹是自己敲的，日后有用到的同學可以直接問我要.

您可能感興趣的文章: