使用jQuery製作的一個放大鏡特效

先看效果：

方圖(w=h)

豎圖(h>w)

橫圖(w>h)

使用說明：

css：頂部引入放大鏡樣式文件magnifier.css,或將magnifier.css中的內容粘貼到自己的樣式文件中亦可，樣式中的屬性值可酌情修改，但一些必須的屬性例如position，display等最好不要刪改。

js：底部引入magnifier.js，由於是基於jquery的，所以務必確保之前已經引入了jquery文件，或者將magnifier.js中的內容粘貼到自己的腳本文件中亦可，為了使html的使用儘可能簡單所以封裝了很多東西，導致文件有點臃腫，我會有時間再改進一下:)

html：由於js已經封裝好了，所以html的使用結構非常簡單，如下即可：

<div class="zoom"><img src="yourImage.jpg" /></div>

製作思路：
使用的是背景圖定位，小圖和大圖用的是同一張圖，根據小圖中放大鏡（即滑鼠）的所在位置映射為影布的背景圖位置。

點擊下載:

打包下載　　magnifier.js　　magnifier.css　　index.html