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

StackOverflow https://stackoverflow.com/questions/5856381

  •  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 просто покажут квадрат, что, возможно, в вашем случае?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top