Плохо видно изображение на сайте, какой нибудь другой контент, или Вы просто хотите привлечь внимание посетителей уникальностью своего информационного ресурса, тогда этот урок именно для Вас.  В данном уроке речь пойдет о создании довольно интересной штуковины,- эффекта zoom для контента. Смотрится очень даже не плохо в применении к различным баннерам или подобной информации. Пользователь наводим мышку, а всплывает пузырек с увеличенным контентом..

 

Для начала нам необходимо подключить скрипты jQuery и стили CSS, разместим пути к ним между тегами <head></head>:

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

После этого мы создаем HTML-разметку, она совсем незначительная ,

Элемент div #iphone будет отображать рамку изображения (если она необходима). Далее div #webpage со скриншотом страницы. А div #retina, это эффект увеличения, который будет показывать увеличенное изображение, для которого мы задали круглую форму с помошью CSS3.  Рассмотрим стили:

TЗаметим, что свойство div #retina имеет  радиус со значением, ровно половине его ширины, что делает его точно круглым (не должно возникнуть проблем браузерами которые поддерживают свойство border-radius CSS3 – Chrome, Safari, Opera и Firefox).

Теперь оживляем все сделанное с помощью jQuery:

Обратите на некоторые функции mousemove, это текущие координаты курсора мыши передаются как e.pageX и e.pageY, но они являются абсолютными по отношению ко всему документу. На этом наш эффект готов.