Question

我很欣赏任何关于如何自定义的javascript / css忍者的想法：

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

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

Answer 1

我想最简单的方法是使用CSS3 border-radius，这是所有网络浏览器的现代版本所支持的（没有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来实现的样本圆形放大镜：

而我的使用div中的绝对定位图像，他的在div和background-position上使用background-image来移动图像，所以css3 border-radius工作。