我如何定制jquery loupe来拥有一个圆形镜头？

Question

我很感激任何javascript / css忍者关于我如何定制的想法：

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

用圆形变焦区域而不是矩形变焦区域？有一个为放大镜设置css类的选项。

请注意，这是一个关于上面链接的库的问题。我已经在谷歌上搜索过其他库了。我想让js尽可能的小。

Answer 1

来自loupe.js的开发者：

你可能想看看chris iufer的放大镜，它只比我的略大一点，其中包括几个使用css3实现圆形放大镜的示例：

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

而我的在div中使用绝对定位的图像，他的使用div上的背景图像和背景位置来移动图像，因此css3边界半径工作。

Answer 2

我想最简单的方法就是使用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都只会显示一个正方形，这在你的情况下可能是可以的？