javascript - 如何自定义 jquery loupe 以获得圆形镜头？

Question

我将不胜感激任何 javascript / css ninjas 关于如何自定义的想法：

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

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

score 3 · Accepted Answer

我想最简单的方法是使用 CSS3 边界半径，所有网络浏览器的现代版本都支持它（没有低于 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 都只会显示一个正方形，在您的情况下这可能没问题？

score 1 · Accepted Answer

来自 loupe.js 的开发者：

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

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

2 回答 2