如何自定義jquery放大鏡以獲得圓形鏡片？

Question

我將不勝感激任何JavaScript/CSS忍者我如何能自定義的想法：

https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js

具有圓形的變焦區域，而不是一個矩形？有一個選項可以爲放大鏡設置一個css類。

請注意，這是關於上面鏈接庫的問題。我已經爲其他圖書館搜索了Google。我想保持js儘可能小。

Answer 1

從loupe.js開發商：

你可能想看看克里斯iufer的放大鏡，這是隻有一點點 比我的大，包括使用CSS3實現 一輪放大鏡幾樣：

http://chrisiufer.com/loupe/sample.html

而礦採用一個div內的絕對定位的形象，他的 上div和背景位置使用背景圖片移動 形象，所以CSS3邊框半徑的作品。

Answer 2

我想要做到這一點的最簡單方法是使用CSS3 border-radius，這是由所有網絡瀏覽器的現代版本（沒有低於版本9的IE）支持。

如果你有這個在JavaScript

$('selector').loupe({ 
    width: 150, // width of magnifier 
    height: 150, // height of magnifier 
    loupe: 'loupe' // css class for magnifier 
}); 

只是把這個在你的CSS：

.loupe { 
-webkit-border-radius: 150px; 
-moz-border-radius: 150px; 
border-radius: 150px; 
} 

...和所有舊版本的IE瀏覽器將只顯示一個正方形，這也許是你的情況好嗎？