如何定制jquery放大镜有圆形透镜？ [英] How can I customise jquery loupe to have a circular lens?

问题描述

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

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

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

请注意，这是关于上面链接的库的问题。我已经google了其他图书馆。

解决方案

从loupe.js的开发人员：

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

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

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

I would appreciate the thoughts of any javascript / css ninjas on how I can customise:

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

To have a circular zoom area instead of rectangular one? There is an option to set a css class for the loupe.

Please note that this is a question about the library linked above. I have already googled for other libraries. I want to keep the js as small as possible.

解决方案

From the developer of loupe.js:

you may want to look at chris iufer's loupe, which is only a bit bigger than mine and includes a few samples that use css3 to achieve a round loupe:

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

whereas mine uses an absolutely positioned image within a div, his uses background-image on the div and background-position to move the image, so css3 border-radius works.

这篇关于如何定制jquery放大镜有圆形透镜？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！