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

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

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

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

Обратите внимание, что это вопрос о библиотеке, указанной выше. Я уже искал другие библиотеки. Я хочу, чтобы js был как можно меньше.


javascript jquery css loupe
person codecowboy    schedule 02.05.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я думаю, что самый простой способ сделать это - использовать 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 будут просто показывать квадрат, что, может быть, нормально в вашем случае?

person Fred Bergman    schedule 02.05.2011
comment
Спасибо за ваш ответ. Лупа — это div без рамки. Я могу добавить границу и сделать ее кривой, но div, содержащий область масштабирования, остается прямоугольным (и сверху) - person codecowboy; 02.05.2011
comment
@codecowboy: Выполните этот фрагмент javascript с помощью Firebug на демонстрационной странице, и вы увидите, что он работает в некоторых примерах: jQuery('.zoomPup').css('-moz-border-radius', '150px'). Ссылка на страницу демонстраций: mind-projects.it/projects/jqzoom/demos. php - person Wolph; 03.05.2011
comment
@codecowboy: радиус границы не имеет ничего общего с обычной границей, поэтому вам не нужно применять границу к вашему div. Вы можете прочитать о радиусе границы здесь: css3.info/preview/rounded-border - person Fred Bergman; 03.05.2011
comment
@WQoLpH это не вопрос о jqzoom - person codecowboy; 04.05.2011
comment
@codecowboy: мой плохой ... ответ остается в силе. Фред Бергман, его ответ отлично работает для jQzoom - person Wolph; 04.05.2011

arrow_upward
1
arrow_downward

От разработчика loupe.js:

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

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

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

person codecowboy    schedule 04.05.2011