Все для веб-дизайнера
Эффект лупы для изображений на jQuery
На сайте, вы наверняка встречали, маленькие изображения, которые плохо видны, из-за масштабирования или разработчик задал такие изначальные параметры. Но что сделать чтобы привлечь к таким изображениям внимания кроме того добавить различные эффекты когда пользователь наводит мышку на картинку. В данном уроке мы рассмотрим несколько вариантов, как создать интересный эффект лупы для изображений. Данный прием отлично подойдет для рекламы на сайте, при этом изображение не обязательно должно быть большим.
Также данный эффект подойдет отлично для больших изображений, например некоторых товаров в интернет-магазине, где покупателю необходимо чётче рассмотреть товар.
Шаг 1. HTML
Для начала рассмотрим построение сетки, для вывода изображений:
|
1 2 3 4 |
<img id="img_01" src="data_images/img1.jpg" width="350" height="262" /> <img id="img_02" src="data_images/img2.jpg" width="350" height="262" /> <img id="img_03" src="data_images/img3.jpg" width="350" height="262" /> <img id="img_04" src="data_images/img4.jpg" width="350" height="262" /> |
Разметка достаточно простая, по этому нет необходимости объяснять. Вот только главная страница с 4 изображениями внутри.
Шаг 2. CSS
Стили достаточно элементарные, мы зададим позиционирование для изображений, фоновую картинку, и рамки вокруг наших изображений.
|
1 2 3 |
body{background: #000000 url(header.jpg) no-repeat center top;;margin:0;padding:0} .example{width:750px;margin:30px auto;padding:15px;} .example img { background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;} |
Шаг 3. JS
Последний этапом станет рассмотрения скрипта, который отвечает за линзы, увеличение, рамки вокруг линзы:
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('#img_01').imageLens(); // Инициализация плагина $('#img_02').imageLens({ lensSize: 200 }); // устанавливаем размер линзы $('#img_03').imageLens({ lensSize: 200, imageSrc: 'data_images/img5.jpg' }); // Размер линзы + Дополнительное изображение $('#img_04').imageLens({ borderSize: 8, borderColor: '#f00' }); // Рамка изображения и ее цвет }); |
Вот и все! Эффект лупы для изображений готово!
| Опубликовал Cooper 24.05.2012 в 14:48, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
