Как я могу настроить jquery loupe, чтобы иметь круглую линзу?

Question

Буду признателен за мысли любого ниндзя javascript / css о том, как я могу настроить:

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

Чтобы иметь круглую область увеличения вместо прямоугольной? Существует возможность установить класс CSS для лупы.

Обратите внимание, что это вопрос о библиотеке, указанной выше. Я уже погуглил для других библиотек. Я хочу, чтобы размер 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:

вы можете взглянуть на лупу Криса Иуфера, которая немного больше моей и включает в себя несколько образцов, использующих css3 для получения круглой лупы:

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

, в то время как мой использует абсолютно позиционированное изображение внутри div, он использует background-image в div и background-position для перемещения изображения, поэтому работает css3 border-radius.