如何定制jquery放大镜以获得圆形镜头？

我会很感激javascript / css ninjas关于如何自定义的想法：

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

要有圆形缩放区域而不是矩形缩放区域？ 可以选择为放大镜设置css类。

请注意，这是关于上面链接的图书馆的问题。 我已经google了其他图书馆。 我想让js尽可能小。

Answer 1

我想最简单的方法是使用CSS3 border-radius，这是所有Web浏览器的现代版本所支持的（没有IE低于版本9）。

如果你的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的所有旧版本都只显示一个正方形，在您的情况下可能没问题？

Answer 2

来自loupe.js的开发者：

你可能想看一下chris iufer的放大镜，它只比我的大一点，并且包括一些使用css3来实现圆形放大镜的样品：

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

虽然我在div中使用绝对定位的图像，但他使用div和background-position上的背景图像来移动图像，因此css3 border-radius起作用。