Как имитировать увеличительное стекло на изображении веб-страницы (Javascript)?

Ответ 1

Глядя на их исходный код, кажется, они используют довольно простые методы для достижения этого.

Игнорируя все встроенные изящные анимированные gif, есть в основном два изображения - большие и маленькие от всей сцены. Изображение большего размера повторяется три раза в документе. Посмотрите на аннотированное изображение ниже, чтобы лучше понять, как работает масштабирование.

Часть внутри увеличительного круга разделяется на три div-top, mid и bottom. Переполнение для каждого div должно быть скрыто. Каждый div относительно расположен внутри круга масштабирования. При перемещении мыши измените абсолютное положение круга масштабирования на координаты мыши. В их примере также используется CSS3 для масштабирования и добавления некоторых задержек анимации.

Здесь сортируется минимально реконструированный пример.

Другой пример, где мы не скрываем переполнение div, чтобы показать всю вещь как квадрат.

Ответ 2

Хорошо, во-первых, для тех, кто хочет использовать такой эффект, есть множество плагинов jQuery. Вот лишь несколько:

• Power Zoomer
• Рекомендуемое изображение Zoomer
• Cloud Zoom

Во-вторых, это довольно легко достичь. Просто загрузите полноразмерное изображение, но дайте ему width меньше фактической ширины, поэтому он масштабируется с помощью CSS. Затем используйте JavaScript + CSS для создания Div (увеличительного стекла) с тем же изображением, что и фон, но измените свойство background-position на соответствующую масштабированную координату x,y, которую пользовательская мышь в данный момент включена.

Есть другие способы сделать это, я полагаю, и Google может делать это по-другому, но это самый очевидный способ для меня, который приходит на ум.

Ответ 3

Посетите http://codeblab.com/glass/ для примера реальной жизни и подробно объясните эту технику. Flash и CSS v3 имеют широкие возможности для создания круглого увеличительного стекла. Однако simulate-a-circle-with-overlapping-rectangles работает на многих платформах.

(РАСКРЫТИЕ: codeblab.com - мой личный блог хобби с некоторыми слабыми ссылками на мою работу в Нидерландах.)

Ответ 4

Существует полный пример увеличения любого вида HTML, включая HTML5, в http://www.aplweb.co.uk/blog/js/magnifying-glass/. Работает кросс-браузер тоже - хотя округленные углы немного в большинстве браузеров - так что вам придется использовать поле, а не круг.

Вот как это работает:

• Дублировать контент, который вы хотите увеличить
• Поместите дублированный контент в другой элемент и установите скрытую ширину/высоту и переполнение скрытых
• Используйте JavaScript для перемещения дублированного контента, чтобы он перемещался по объему масштабирования * движению мыши. Также перемещайте видимый div движением мыши.

Это в значительной степени это тоже. Есть много мелочей, которые нужно искать, хотя для работы над всеми браузерами.

Ответ 5

Я не знаю, как Google это делает, поскольку логотип больше не отображается в моей области; но этот эффект может быть достигнут путем отсечения увеличенного анимированного GIF поверх обычного изображения с использованием холста. В качестве альтернативы, также можно создать создание кругового обрезания с использованием граничного радиуса CSS (обычно используемого для реализации закругленных углов).

EDIT: я взломал это вместе, чтобы показать основную технику, которая вам нужна, если вы используете граничный радиус CSS: http://jsfiddle.net/yjBuS/

Ответ 6

Похоже, они используют два изображения: один для логотипа и один для увеличения (увеличенный на самом деле нарезанный, для запуска анимации отдельно...?) Вероятно, они обнаруживают, что мышь над нормальным логотипом, затем покажите желтый круг и прикрепите его к позиции мыши. Затем показывается другое изображение, смещая его напротив мыши. Или что-то подобное.