Эффект лупы для изображений
Также данный эффект подойдет отлично для больших изображений, например некоторых товаров в интернет-магазине, где покупателю необходимо чётче рассмотреть товар.
Шаг 1. HTML
Для начала рассмотрим построение сетки, для вывода изображений:
Шаг 2. CSS
Стили достаточно элементарные, мы зададим позиционирование для изображений, фоновую картинку, и рамки вокруг наших изображений.
Шаг 3. JS
Последний этапом станет рассмотрения скрипта, который отвечает за линзы, увеличение, рамки вокруг линзы:
Вот и все! Эффект лупы для изображений готово!
Исходники в архиве.
Шаг 1. HTML
Для начала рассмотрим построение сетки, для вывода изображений:
Код
<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" />
<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" />
Шаг 2. CSS
Стили достаточно элементарные, мы зададим позиционирование для изображений, фоновую картинку, и рамки вокруг наших изображений.
Код
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;}
.example{width:750px;margin:30px auto;padding:15px;}
.example img { background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;}
Шаг 3. JS
Последний этапом станет рассмотрения скрипта, который отвечает за линзы, увеличение, рамки вокруг линзы:
Код
$(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' }); // Рамка изображения и ее цвет
});
$('#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' }); // Рамка изображения и ее цвет
});
Вот и все! Эффект лупы для изображений готово!
Исходники в архиве.
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |