Как имитировать увеличительное стекло на изображении веб-страницы (Javascript)?
В Google самые крутые эффекты - когда это была игра Pac-man, сегодня, по всей видимости, 160-летие первой Всемирной выставки, и логотип Google имеет ее образ. Они также превращают мышь в увеличительное стекло, которое может подметать изображение (золотое кольцо).
![enter image description here]()
Мне интересно, как они это делают. Очевидно, Javascript, и я посмотрел на источник страницы, но это не особенно читаемо (не удивительно).
Ответы
Ответ 1
Глядя на их исходный код, кажется, они используют довольно простые методы для достижения этого.
Игнорируя все встроенные изящные анимированные gif, есть в основном два изображения - большие и маленькие от всей сцены. Изображение большего размера повторяется три раза в документе. Посмотрите на аннотированное изображение ниже, чтобы лучше понять, как работает масштабирование.
![annotated zoom]()
Часть внутри увеличительного круга разделяется на три div-top, mid и bottom. Переполнение для каждого div должно быть скрыто. Каждый div относительно расположен внутри круга масштабирования. При перемещении мыши измените абсолютное положение круга масштабирования на координаты мыши. В их примере также используется CSS3 для масштабирования и добавления некоторых задержек анимации.
Здесь сортируется минимально реконструированный пример.
Другой пример, где мы не скрываем переполнение div, чтобы показать всю вещь как квадрат.
Ответ 2
Хорошо, во-первых, для тех, кто хочет использовать такой эффект, есть множество плагинов jQuery. Вот лишь несколько:
Во-вторых, это довольно легко достичь. Просто загрузите полноразмерное изображение, но дайте ему 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
Похоже, они используют два изображения: один для логотипа и один для увеличения (увеличенный на самом деле нарезанный, для запуска анимации отдельно...?) Вероятно, они обнаруживают, что мышь над нормальным логотипом, затем покажите желтый круг и прикрепите его к позиции мыши. Затем показывается другое изображение, смещая его напротив мыши. Или что-то подобное.