Эффект лупы для изображения uCoz
В этом материале мы поговорим о масштабировании картинки с эффектом лупы. При наведении на картинку появиться овальные элемент в радиусе которого картинка будет увеличиваться. Все это мы будем делать с помощью библиотеки JQuery и специального плагина ImageLens.
Установка
Для начала подключим наши библиотеки и пропишем несколько параметров для нашей лупы, чтобы увидеть наглядный пример какие параметры мы можем использовать. Думаю рассказывать о них я не буду, вы прекрасно все поймете, посмотрев демо страничку. Под каждой картинкой прописан #id и параметры которые указаны в нашем материале.
<script src="/js/jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("#img_01").imageLens();
$("#img_02").imageLens({ lensSize: 200 });
$("#img_03").imageLens({ imageSrc: "sample01.jpg" });
$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
});
</script>
Осталось вставить изображение на страничку и прописать к нему вызов функции эффекта лупы, а для этого прописываем на страничке следующий код:
Установка завершена. По желанию вы можете подредактировать скрипт под себя. Отзывы оставляйте в комментариях. И не забывайте делиться материалами со своими друзьями.
