如何自定义 jquery loupe 以获得圆形镜头？答案

【问题标题】：How can I customise jquery loupe to have a circular lens?如何自定义 jquery loupe 以获得圆形镜头？
【发布时间】：2011-08-16 21:59:11
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

感谢您的回复。放大镜是一个没有边框的 div。我可以添加一个边框并将其变为曲线，但包含缩放区域的 div 仍然是矩形（并且在顶部）
@codecowboy：在演示页面上用 Firebug 执行这段 javascript，你会发现它在一些示例中有效：jQuery('.zoomPup').css('-moz-border-radius', '150px')。演示页面链接：mind-projects.it/projects/jqzoom/demos.php
@codecowboy：border-radius 与普通边框无关，因此您不需要为您的 div 应用边框。您可以在此处阅读有关边界半径的信息：css3.info/preview/rounded-border
@WQoLpH 这不是关于 jqzoom 的问题
@codecowboy：我的错……但答案仍然成立。 Fred Bergman 他的回答非常适合 jQzoom

【解决方案2】：

来自 loupe.js 的开发者：

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

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

【讨论】：