Как я могу настроить jquery loupe, чтобы иметь круговую линзу?
-
27-10-2019 - |
Вопрос
Я был бы признателен за мысли любых ниндзя JavaScript / CSS о том, как я могу настроить:
https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js
Иметь площадь круговой масштабирования вместо прямоугольной? Есть возможность установить класс CSS для Loupe.
Обратите внимание, что это вопрос о библиотеке, связанной выше. Я уже погуглил для других библиотек. Я хочу сохранить JS максимально маленьким.
Решение 2
От разработчика Loupe.js:
Возможно, вы захотите взглянуть на Loupe Криса Иуфера, которая всего лишь больше, чем у меня, и включает в себя несколько образцов, которые используют CSS3 для достижения круглой лупы:
http://chrisiufer.com/loupe/sample.html
Принимая во внимание, что мой использует абсолютно позиционированное изображение в Div, его использует фоновое изображение на Div и фоновое положение для перемещения изображения, поэтому CSS3 Border-Radius работает.
Другие советы
Я предполагаю, что самый простой способ сделать это-использовать 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 просто покажут квадрат, что, возможно, в вашем случае?