使用jquery實作放大鏡效果

實作原理

首先，我們講解一下放大鏡效果的實作方式：

方法一：準備一張高像素的大圖，當滑鼠放到原圖上，加載顯示大圖的對應位置。

方法二：對原圖檔進行放大，也就是調整原圖的長和寬。

上面我們介紹了通過兩種方式實作放大鏡效果，接下來，我們将以上的兩種方式應用到我們的jQuery插件中。

首先，我們需要一個img元素顯示原圖對象，還需要一個容器作為顯示框；顯示框裡面存放大圖對象。當滑鼠移動到原圖上時，通過對大圖進行絕對定位來顯示對應的部位，實作類似放大鏡的效果。

接下來，讓我們定義Index.html頁面，具體實作如下：

css樣式：

mousemove事件

接下來，我們通過jQuery插件形式來實作放大鏡效果，當滑鼠移動到small對象上方時，就會在large對象中顯示大圖的對應位置，這就涉及到mousemove事件了，是以，我們需要實作mousemove事件的監聽方法。

實作jquery.imagezoom.js插件：

注釋：當滑鼠移動到magnify對象中，我們需要擷取滑鼠在magnify中的相對坐标位置，這裡我們把相對坐标定義為(mx,my)，通過上圖我們知道相對坐标等于(pageX - offsetLeft, pageY - offsetTop)。

現在，我們已經擷取滑鼠在magnify對象中的坐标值，接下來，需要擷取對應大圖的相應坐标，這裡我們把大圖的對應坐标定義為(rx,ry)，我們可以通過比例關系擷取(rx,ry)的值。

mx / small.width （原圖的寬）= rx / native_width（大圖的寬）

my / small.height （原圖的長）= ry / native_height（大圖的長）

通過上面的比例關系，我們知道大圖的坐标(rx,ry)等于(mx/small.widthnative_width, my/small.heightnative_height)。

mousewheel事件

前面，我們通過mousemove事件來放大圖檔，這裡我們将通過滑鼠的滾輪事件實作圖檔放大效果。

由于，不同的浏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（隻有Firefox支援），關于這三個事件這裡不做詳細的介紹了。

由于不同浏覽器之間存在着差異，為了實作浏覽器之間的相容，是以，我們需要監聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實作如下：

上面，我們實作了相容不同浏覽器的滾輪事件監聽方法，接下來，判斷滾輪向上或向下也要考慮不同浏覽器的相容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；兩者隻在取值上不一緻，代表含義一緻，detail與wheelDelta隻各取兩個值，detail隻取±3，wheelDelta隻取±120，其中正數表示為向上，負數表示向下。

由于detail和wheelDelta都有兩個值表示向上或向下滾動，是以不同浏覽器間可以通過以下方式實作相容，具體實作如下：

上面，我們已經處理了不同浏覽器滾輪監聽方法，當使用者滾動滾輪時需要動态地修改原圖的尺寸，這裡我們定義縮放比scaling為0.3，也就是說每當使用者滾動一下滾輪原圖就按0.3的比例進行縮放，具體實作如下：

上面，我們實作了放大鏡效果，當我們滑鼠停留在圖檔上方會自動放大圖檔的相應部位，當然我們可以通過滾輪調整放大的比例。

參考