快捷導(dǎo)航

基于jquery的商品展示放大鏡

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

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

直接上代碼吧（一共也才100來行，小東西）

復(fù)制代碼代碼如下:

 
$(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) { // 在鼠標(biāo)移動(dòng)至操作層以后才LazyBind鼠標(biāo)移動(dòng)事件 
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); 
//當(dāng)大圖X坐標(biāo)大于0，也就是到達(dá)最左邊距時(shí)重置為0,當(dāng)圖片的X偏移量已經(jīng)超出顯示的容器時(shí)，則重置為其X偏移量為圖片與容器之差的負(fù)數(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; 
} 
//當(dāng)大圖Y坐標(biāo)大于0，也就是到達(dá)最上邊距時(shí)重置為0，當(dāng)圖片的Y偏移量已經(jīng)超出顯示的容器時(shí)，則重置為其Y偏移量為圖片與容器之差的負(fù)數(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 大家應(yīng)該注意到了，還是有很多CSS HACK的地方，現(xiàn)在這個(gè)東西是兼容FF3.0，IE 6，
7 ，8 以及chrome的，其他的還沒有來得及試驗(yàn)

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

3 之所以在頁(yè)面加載完畢以及鼠標(biāo)離開操作層的時(shí)候?qū)⒋髨D的位置設(shè)置為最右下方，是
因?yàn)闉榱吮苊獾诙c(diǎn)中提到的“跳幀”而用的分條件判斷，在第一時(shí)間用戶觸發(fā)鼠標(biāo)移動(dòng)
事件的時(shí)候，如果由操作層的右側(cè)或是下側(cè)進(jìn)入的話，就會(huì)有不正確的顯示，這估計(jì)也是
很多網(wǎng)上直接把放大鏡層在加載的時(shí)候設(shè)置為hidden的原因，我覺得這仍是一個(gè)BUG，希
望有大蝦指點(diǎn)正確的做法。

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="鼠標(biāo)劃過查看細(xì)節(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)品細(xì)節(jié)" /></div>

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

您可能感興趣的文章: