Статьи

Увеличить с плагином JQuery

Если вы хотите добавить некоторые функции «Zoom In» на веб-страницу, «Anything Zoomer» — это новый бесплатный плагин jQuery от Криса Койера из CSS-Tricks . Это простая концепция, когда у вас может быть маленькое изображение или небольшой текст, вы наводите указатель мыши на область, а изображение или текст увеличивается, чтобы вы могли рассмотреть их поближе.

От создателя:

Он гибок во многих отношениях, так как «маленькие», «большие» и «зум» области довольно легко настраиваются (с помощью CSS). Другими словами, он негибкий, поскольку не «автоматически» работает путем клонирования контента или чего-либо подобного (что, возможно, более гибко), а структура HTML довольно жесткая.

В приведенном ниже примере вы можете увидеть небольшую увеличенную область над исходным маленьким изображением.

image-demo

Помимо работы с изображениями и текстом, плагин позволяет увеличивать другие элементы, например календарь.
calendar-demo

Хотя зум работает прекрасно и выглядит простой концепцией, в создании масштабируемой области участвуют пять частей.

  • Обертка — обходит все.
  • Малая область — видимая область по умолчанию, которую вы наводите, чтобы увеличить.
  • Большой — контент для просмотра через зоомер.
  • Наложение — поле масштабирования, которое следует за мышью вокруг.
  • Mover — пленка для большой площади и накладка.

Плагин очень гибкий и позволяет настраивать каждую из этих частей.

Проверьте рабочие демо здесь .

Вы можете скачать плагин на той же странице, и вам будет приятно узнать, что есть хорошая документация поддержки, объясняющая, как именно его использовать.

Другие плагины jQuery Zoom для просмотра:

Связанное Чтение: