如何自定义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浏览器将只显示一个正方形，这也许是你的情况好吗？